مقدمة

في الدرس السابق قمنا بتعديل المشروع لنقوم بتبادل البيانات عن طريق Vuex والغاء تمرير البيانات من خلال Props , سنرى في هذا الدرس كيف يمكننا اجراء بعض العمليات على البيانات الموجودة في الـ "store" لعرضها بشكل مختلف من دون تغيير قيمتها الأصلية.  في مشروعنا التعليمي قمنا بعرض درجات الطلبة بالرقم كـ درجة مئوية كما هي مسجلة في الكائن "grades" ماذا لو اردنا ان نقوم بعرضها على طريقة التقدير بالحروف (A, B, C, D) ؟ في هذا الدرس سنتعرف على خاصية Getters التي ستمكننا من استرجاع البيانات بعد تطبيق عمليات عليها دون ان تغير على قيمتها الاصلية المخزنة. 

فائدة Getters 

نريد عرض درجات الطلبة بالتقدير التالي: 
فوق الـ90 == A 
فوق الـ80 == B 


لا بد ان يتبادر الى ذهنك ان تسترجع القيم في العنصر كما فعلنا بالدرس السابق ثم اجراء التعديلات التي تريدها مباشرة كما في الصورة التالية:

 بهذا الشكل قمنا بتنفيذ المطلوب, لكنك مضطر للتعديل في العنصرين ( ListOne, ListTwo ) كل منهما على حدة وهذا غير جيد اذا كان مشروعك كبير فربما تنسى التعديل في عنصر ما وايضًا ستضطر لتكرار الكود في كل العناصر! ومن هنا تستطيع ان تستنتج ما هي فائدة الـGetters, ستمكنك هذه الخاصية من التعديل على البيانات مباشرة من داخل الـ"store" ثم استعادتها من جميع العناصر بنفس الهيئة. لنقم الان باعادة تنظيم الكود واستخدام خاصية Getters : 

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

  getters:{
          
  }

• في داخله قم بتعريف خاصية جديدة بإسم "alphabetDegree" وبداخلها قم بعمل التعديلات التي تريد على البيانات:

  getters:{
      alphabetDegree: state => {
          var alphabetDegree =  state.grades.map(grade => {
              return {
                  name: grade.name,
                  degree: grade.degree >= 90 ? "A" : (grade.degree >= 80 ? "B" : "")
              }
          });
          return alphabetDegree;
      }
  }

  لاحظ اننا وصلنا الى البيانات بشكل مباشر دون الحاجة الى "this.$store" وذلك لاننا قمنا بتمرير state كمُعامل (Parameter). 

• يمكن الوصول الى خواص getters من جميع العناصر كالتالي: 
  ملاحظة: قم بإجراء التعديلات في كلا العنصرين ( ListOne, ListTwo ).

  

• لنحصل على الناتج: 
  
   

  

تمرير المعاملات (Parameter)

ماذا لو اردنا ان نقوم بعرض الطلبة اللذين تفوق درجاتهم الـ90 او الـ80 او اي رقم اخر اختاره؟ لا بد ان اقوم بتمرير معامل لخاصية getters. لنقم باضافة خاصية جديدة تستقبل معامل واحد لعرض الطلبة بحسب ما ارسل بالمعامل: 

• قم بتعريف خاصية جديدة بإسم "StudentsFilter" مع تعريف معامل بإسم "degree" : 

  studentsFilter: state => degree => {
  
  }

   

• قم بكتابة كود لاسترجاع الطلبة الذين درجاتهم تفوق المعامل "degree" : 

  

• يمكنك الان استدعاؤها من اي عنصر تريد, لنقم بإستدعائها في ListOne لتعرض الطلبة الذين تفوق درجاتهم الـ90, ونترك ListTwo تعرض جميع الطلبة مهما كانت درجاتهم:

  

   

  

في الدرس القادم سنتطرق للتعديل على البيانات الموجودة في "store" . 

الدرس على Github