سلسلة تعلم Vuex

ما هي Vuex ؟ Vuex هي مكتبة تمكنك من استخدام نمط State Management داخل مشاريع Vue. أي انها مركز تخزين بيانات يمكن الوصول له من جميع العناصر (Components) في المشروع, يمكن ان تحتوي على متغيرات, مصفوفات, كائنات (Objects), الخ ... في العادة يتم التواصل ونقل البيانات بين العناصر اما عن طريق Props

مقدمة سنقوم بإنشاء مشروع Vue لنستعمله لنقوم ببناء مشروعنا البسيط (عرض درجات الطلاب في قوائم), سأقوم باستخدام هذا المستودع الذي يحتوي على Vue + Laravel Mix. واترك لك الخيار في استخدامه او استخدام اي طريقة تريد. تجهيز المشروع التعليمي بالبداية سنقوم بتعريف عنصر root-component وفي داخله سنقوم بتعرف…

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

مقدمة في الدرس السابق قمنا بتعديل المشروع لنقوم بتبادل البيانات عن طريق Vuex والغاء تمرير البيانات من خلال Props , سنرى في هذا الدرس كيف يمكننا اجراء بعض العمليات على البيانات الموجودة في الـ "store" لعرضها بشكل مختلف من دون تغيير قيمتها الأصلية. في مشروعنا التعليمي قمنا بعرض درجات

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

مقدمة من خلال الدروس السابقة تعرفنا على كثير من الخواص ومتى نستخدم كل منها, في هذا الدرس سنتعرف على خاصية Actions وهي مشابهة جدًا لخاصية Mutations لكن الفرق بينهما ان خاصية Actions تستطيع التعامل مع العمليات الغير متزامنة (Asynchronous operations) بحيث تتعامل مع العملية الغير متزامنة ثم تستدعي احد

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