التنظيم باستخدام Modules

محمود العموشمنذ 3 سنوات

مقدمة

في الدروس السابقة تعلمنا استخدام 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

المحاضر

محمود العموش

الكلمات الدليلية

عن الدرس

2 إعجاب
2 متابع
0 مشاركة
1097 مشاهدات
منذ 3 سنوات

التعليقات (1)

eslam:

ماشاء الله شرح ممتاز جداً ربنا يجعله في ميزان حسناتك

عندي تعديل بسيط بخصوص ال state داخل ال module لا تتأثر ب namespaced

الاستدعاء الصحيح بالشكل دا

 

this.$store.state.Students.grades;

 

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !