مقدمة

من خلال الدروس السابقة تعرفنا على كثير من الخواص ومتى نستخدم كل منها, في هذا الدرس سنتعرف على خاصية Actions وهي مشابهة جدًا لخاصية Mutations لكن الفرق بينهما ان خاصية Actions تستطيع التعامل مع العمليات الغير متزامنة (Asynchronous operations) بحيث تتعامل مع العملية الغير متزامنة ثم تستدعي احد خواص Mutations, بمعنى انك تستطيع استخدامها في حال اردت تنفيذ Mutation بعد وقت معين (Timeout) او استخدامها مع Mutation تريد تكرارها كل فترة زمنية (Timeinterval) وكذلك التعامل مع الواجهات البرمجية (API's) عن طريق (HTTP Request). 

استخدام Actions

نريد ان نقوم بتحديث درجات الطلبة بعد مدة معينة, وبم ان هذه العملية غير متزامنة "ستنفذ بعد مدة زمنية معينة" بالتالي نحتاج الى استخدام خاصية Actions وسنرى خطوات استخدامها: 

• من ملف store.js داخل ثابت "store" قم بتعريف كائن "actions" :

  actions:{
      
  }

• قم بتعريف خاصية جديدة بإسم "updateDegree" مع تعريف معامل بإسم "payload" الذي سيحمل عدد الدرجات المراد اضافتها للطلبة: 

  actions:{
     addDegree: (state,payload) => {
              
     }
  }

  *ملاحظة: لا بأس في تشابه الاسماء بين الـ(Actions) والـ(Mutations) .
  
   
• قم باستخدام Timeout لتنفيذ الزيادة بعد مدة ثلاث ثواني:

  actions:{
      addDegree: (state,payload) => {
          setTimeout(() => {
              state.commit('addDegree', payload);
          }, 3000);
      }
  }

  لاحظ اننا قمنا باستدعاء احد خواص Mutations من داخل خاصية Actions .
  
   
• من العنصر "ListOne" الذي استخدمناه في الدرس السابق لاستدعاء احد خواص Mutations , نحتاج ان نقوم بتعديل الدالة التي كتبناها بحيث سنجعلها تستعدي Action بدلا من Mutation : 

  methods:{
      addDegree(){
          this.$store.dispatch("addDegree", 5);
      }
  }

• هكذا سيتم تعديل البيانات بعد الضغط على الزر بثلاثة ثواني.

الدرس على Github.