شرح Actions
مقدمة
من خلال الدروس السابقة تعرفنا على كثير من الخواص ومتى نستخدم كل منها, في هذا الدرس سنتعرف على خاصية Actions وهي مشابهة جدًا لخاصية Mutations لكن الفرق بينهما ان خاصية Actions تستطيع التعامل مع العمليات الغير متزامنة (Asynchronous operations) بحيث تتعامل مع العملية الغير متزامنة ثم تستدعي احد خواص Mutations, بمعنى انك تستطيع استخدامها في حال اردت تنفيذ Mutation بعد وقت معين (Timeout) او استخدامها مع Mutation تريد تكرارها كل فترة زمنية (Timeinterval) وكذلك التعامل مع الواجهات البرمجية (API's) عن طريق (HTTP Request).
استخدام Actions
نريد ان نقوم بتحديث درجات الطلبة بعد مدة معينة, وبم ان هذه العملية غير متزامنة "ستنفذ بعد مدة زمنية معينة" بالتالي نحتاج الى استخدام خاصية Actions وسنرى خطوات استخدامها:
- من ملف store.js داخل ثابت "store" قم بتعريف كائن "actions" :
actions:{ }
- قم بتعريف خاصية جديدة بإسم "updateDegree" مع تعريف معامل بإسم "payload" الذي سيحمل عدد الدرجات المراد اضافتها للطلبة:
actions:{ addDegree: (state,payload) => { } }
- قم باستخدام Timeout لتنفيذ الزيادة بعد مدة ثلاث ثواني:
actions:{ addDegree: (state,payload) => { setTimeout(() => { state.commit('addDegree', payload); }, 3000); } }
- من العنصر "ListOne" الذي استخدمناه في الدرس السابق لاستدعاء احد خواص Mutations , نحتاج ان نقوم بتعديل الدالة التي كتبناها بحيث سنجعلها تستعدي Action بدلا من Mutation :
methods:{ addDegree(){ this.$store.dispatch("addDegree", 5); } }
- هكذا سيتم تعديل البيانات بعد الضغط على الزر بثلاثة ثواني.
الدرس على Github.
محتوى الدورة
الدرس | |
---|---|
1 | مقدمة |
2 | تهيئة مشروع Vue للبدء |
3 | تنصيب Vuex واستخدامها |
4 | شرح Getters |
5 | شرح Mutations |
6 | شرح Actions الدرس الحالي |
7 | التنظيم باستخدام Modules |
الكلمات الدليلية
عن الدرس
1 إعجاب |
1 متابع |
0 مشاركة |
1237 مشاهدات |
منذ 4 سنوات |
التعليقات (0)
عرض المزيد.. جديد مقالاتي
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !