مقدمة

في الدرس السابق قمنا ببناء مشروع بسيط يهدف لنقل كائن يحتوي على درجات واسماء الطلاب من عنصر الى عناصر اخرى عن طريق استخدام Props. في هذا الدرس سنقوم بتنصيب Vuex لنرى كيف يمكن لها ان تسهل عملية نقل البيانات بين العناصر.

تنصيب مكتبة Vuex

التنصيب باستخدام NPM :

npm install vuex --save

التنصيب باستخدام yarn :

yarn add vuex

او بإمكانك تحميلها بشكل يدوي من الرابط واستدعاؤها في مشروعك:

<script src="/path/to/vuex.js"></script>

تجهيز مجلد Store

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

• اضافة Vue و Vuex :

    import Vue from 'vue';
    import Vuex from 'vuex';
  
    Vue.use(Vuex);
  

• تعريف ثابت و استخدامه لتخزين البيانات عن طريق دالة Store من مكتبة Vuex :

    export const store = new Vuex.Store({
    		state:{
    				//Your Variable Here
    		}
    })
  

  ملاحظة: نقوم باضافة جملة export قبل تعريف الثابت لكي نستطيع اضافة (import) الثابت من ملف Vue الرئيسي كما في الخطوة القادمة.

• في ملف Vue الرئيسي قم بإضافة الثابت "store" وتعريفه داخل كائن Vue:

الوصول للبيانات الموجودة في store

يمكننا الان استخدام مكتبة Vuex وتخزين البيانات داخل "store" والوصول لها من اي عنصر بالمشروع. سنقوم بتخزين بيانات الطلبة في ملف store.js داخل كائن state "الذي سيحوي جميع البيانات التي تريد تخزينها" ليصبح الملف بهذا الشكل:

لا حاجة لوجود كائن "grades" داخل root-component الذي استخدمناه بالدرس السابق, ولا حاجة لوجود Props في العنصرين ( list-one, list-two ) سنقوم بحذفهم لتصبح هذه الملفات على هذا الشكل:

والان بعد ازالة ما لا حاجة له, سنجلب البيانات من الـstore من مختلف العناصر عن طريق تعريف خاصية computed داخل العناصر التي تحتاج جلب كائن "grades" :

• نقوم بتعريف كائن computed داخل العناصر ( ListOne, ListTwo ) ونقوم بتعريف خاصية جديدة باسم "grades" :

    computed: {
    		grades(){
    				return 
    		}
    }
  

• سنقوم بارجاع (return) كائن "grades" الموجود داخل "store" كالتالي:

    computed: {
    		grades(){
    				return  this.$store.state.grades;
    		}
    }
  

  ملاحظة: لا تنسى ان تقوم بهذه التغييرات في كلا العنصرين.

  • وبهذه الشكل نكون قد استخدمنا Vuex ونقلنا البيانات من خلالها لأول مرة في المشروع وحصلنا على نفس النتيجة بسهولة وتنظيم اكبر :)

  

لكن ماذا لو اردت التعديل على البيانات الموجودة في "store" ؟ او ربما عرضها بشكل مختلف دون تغيير قيمها ؟ وماذا لو اردت جلب البيانات من سيرفر ما وتخزينها في state ؟

سنتطرق لهذه المواضيع في الدروس القادمة من الدورة.

الدرس على Github