مقدمة

في الدروس السابقة تعلمنا استخدام Vuex وتستطيع الان التعامل مع جميع البيانات الموجودة في "store" . اذا كان مشروعك كبيرًا وقمت بتخزين الكثير من البيانات داخل "store" , فسيصبح مشروعك غير منظم وسيصعب عليك تنظيم المشروع. يمكن حل هذه المشكلة عن طريق استخدام الـ Modules فستقوم بتقسيم الـstore الى عدة ملفات بحيث تخزن كل مجموعة بيانات مترابطة في ملف منفصل. 

 

تقسيم المشروع الى Modules

في المشروع السابق كنا نقوم بتخزين بيانات الطلبة في ملف store.js , الان سنقوم بفصل بيانات الطلبة الى ملف خاص بها. ولنفترض ان لدينا بيانات خاصة بالمدرسين, سنقوم بتخزينها ايضا في ملف منفصل لوحدها. بعد فصل البيانات الى ملفات مختلفة, ستصبح مهمة ملف store.js هي فهرسة الملفات الموجودة داخل مجلد modules . سنقوم بتطبيق هذا عن طريق عدة خطوات:

• انشئ مجلد modules داخل مجلد store.
   
• في داخل المجلد انشئ ملف بإسم Students.js لتخزين بيانات الطلبة بداخله, وملف بإسم Teacher.js لتخزين بيانات المدرسين بداخله -على افتراض انها موجودة- .
   
• قم بتمهيد الملف  Students.js بالشكل التالي:

  export default {
      namespaced: true,
  
      state: {},
      
      getters: {},
  
      mutations: {},
  
      actions: {},
  }

  ومن هنا تستطيع ان تضع كل البيانات والخواص المتعلقة بمعلومات الطلبة, وفي ملف Teacher.js قم بنفس العملية لتخزين بيانات المدرسين فيها.
  
   

• سأقوم بنقل كافة البيانات والخواص من ملف store.js الى Students.js ليصبح بهذا الشكل:

  export default {
      namespaced: true,
  
      state:{
          grades: [
              {name: "Mahmoud" , degree: 85},
              {name: "Abdullah" , degree: 95},
              {name: "Ahmad" , degree: 93},
              {name: "Belal", degree: 81},
              {name: "Harbi" , degree: 88}
          ],
      }, 
      getters:{
          alphabetDegree: state => {
              var alphabetDegree =  state.grades.map(grade => {
                  return {
                      name: grade.name,
                      degree: grade.degree >= 90 ? "A" : (grade.degree >= 80 ? "B" : "")
                  }
              });
              return alphabetDegree;
          },
  
          studentsFilter: state => degree => {
              var studentsFilter = state.grades.filter(grade => {return grade.degree > degree});
              return studentsFilter;
          },
      },
  
      mutations: {
          addDegree: (state,payload) => {
              state.grades.forEach(grade => {
                  grade.degree += payload;
              });
          }
      },
  
      actions:{
          addDegree: (state,payload) => {
              setTimeout(() => {
                  state.commit('addDegree', payload);
              }, 3000);
          }
      }
  }

• سنقوم باضافة (import) لجميع ملفات Modules الى ملف store.js :

  import StudentsModule from './modules/Students.js';
  import TeachersModule from './modules/Teachers.js';

   

• تبقى تعريف كائن "modules" داخل ثابت "store" بعد ان تقوم بحذف جميع محتوياته التي نقلناها الى Students.js ليصبح الملف بهذا الشكل:

  import Vue from 'vue';
  import Vuex from 'vuex';
  
  Vue.use(Vuex);
  
  import StudentsModule from './modules/Students.js';
  import TeachersModule from './modules/Teachers.js';
  
  export const store = new Vuex.Store({
      modules: {
          Students: StudentsModule,
          Teachers: TeachersModule
        }
  })

   

• بعد استخدام هذه الطريقة ستتعدل طريقة الوصول الى البيانات في جميع العناصر (ListOne, ListTwo) لتصبح بهذا الشكل:

  // State
  this.$store.state.Students.grades;
  
  // Mutation
  this.$store.commit("Students/addDegree", 5);
  
  // Action
  this.$store.dispatch("Students/addDegree", 5);
  
  // Getter
  this.$store.getters['Students/studentsFilter'](90);

   

• او تستطيع الوصول لها بالصيغة الطبيعية لكن بشرط تعطيل "namespaced" باسناد قيمة False لها, او حذفها من الـ Module فيصبح تمهيد الملف بهذا الشكل:

  export default {
  
      state: {},
      
      getters: {},
  
      mutations: {},
  
      actions: {},
  }

  
   

• وللتذكير هذه الصيغة الطبيعية للوصول الى الـModules :

  // State
  this.$store.state.grades;
  
  // Mutation
  this.$store.commit("addDegree", 5);
  
  // Action
  this.$store.dispatch("addDegree", 5);
  
  // Getter
  this.$store.getters.studentsFilter(90);
  

  
  
   

والى هنا نكون قد وصلنا الى نهاية الدورة اتمنى ان يكون المحتوى مفهوم وذو فائدة :)

الدرس على Github