مقدمة

في الدرس السابق تعرفنا على خاصية Getters والتي من خلالها استطعنا ان نسترجع البيانات بعد ان نقوم ببعض التعديلات عليها من دون التغيير على قيمة الكائن "grades" , وقمنا بتطبيق مثالين احدهم ليعرض لنا درجات الطلبة بنظام الحروف, والاخر يعرض لنا الطلبة الذين تفوق درجتهم الـ90. في هذ الدرس نريد ان نقوم بإضافة بعض الدرجات لجميع الطلبة, بالتالي نحتاج الى ان نعدل على الكائن "grades" , ومن هنا تأتي الحاجة لاستخدام خاصية Mutations التي سنتعرف عليها في هذا الدرس. 

استخدام Mutations

سنتعلم استخدام الـ Mutations عن طريق تطبيق المثال , ولذلك سنقوم بالخطوات التالية: 

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

  mutations: {
      
  }

   

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

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

   

• قم بكتابة كود يضيف درجات للطلبة: 

  mutations: {
      addDegree: (state,payload) => {
          state.grades.forEach(grade => {
              grade.degree += payload;
          });
      }
  }

   

• نحتاج الان الى تعريف دالة في اي عنصر في اي عنصر بالمشروع -مثلا ListOne- تقوم الدالة بإستدعاء خاصية "addDegree" الموجودة في "mutations" : 

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

  لاحظ كيف تم الاستدعاء وكيف تم تمرير القيمة "5" للمعامل "payload" .

• قم باضافة زر (Button) لينفذ الدالة "addDegree" عند الضغط عليه:

  

وبهذا نكون قد قمنا بالتعديل على بيانات الكائن "grades" 

ملاحظة: تستطيع استخدام خاصية Mutations بدون ان تقوم بتمرير معاملات. 

الدرس على Github