Vuex هي state مكتبة إدارة للتطبيقات Vue.js ، مما يسمح لك بإدارة البيانات ومزامنتها عبر component تطبيقات مختلفة في تطبيقك. Vuex ينفذ بنية Flux ، مما يجعل إدارة التطبيق سهلة وفعالة state.
Vuex تشمل المفاهيم الرئيسية
1. State
state يمثل in مخزن Vuex البيانات المركزي لتطبيقك. يحتفظ ببيانات التطبيق التي يجب مشاركتها بين مختلف component s. فيما يلي مثال على تحديد state in Vuex:
2. Mutations
Mutations هي المسؤولة عن تعديل state في Vuex. إنها وظائف متزامنة تأخذ التيار state والحمولة كوسائط. فيما يلي مثال على تحديد الطفرة في Vuex:
3. Actions
Actions تُستخدم للتعامل مع العمليات غير المتزامنة والإرسال mutations لتعديل ملف state. يمكن أن تحتوي على استدعاءات API أو مهام غير متزامنة أو منطق معقد. فيما يلي مثال على تحديد إجراء في Vuex:
4. Getters
Getters تسمح لك باسترداد وحساب المشتق state من Vuex المتجر. إنها مفيدة للوصول إلى البيانات ومعالجتها قبل إعادتها إلى component s. فيما يلي مثال على تعريف الطالب في Vuex:
للتثبيت Vuex في Vue.js مشروعك ، يمكنك اتباع هذه الخطوات
الخطوة 1: التثبيت Vuex عبر npm أو الغزل:
أو
الخطوة 2: قم بإنشاء store.js
ملف في الدليل الجذر لمشروعك. هذا هو المكان الذي سنعلن فيه التطبيق ونديره state.
الخطوة 3: في store.js
الملف ، قم باستيراد Vuex وإنشاء كائن تخزين جديد:
الخطوة 4: في الملف main.js
، قم باستيراد المتجر واربطه بتطبيق Vue الخاص بك:
الخطوة 5: الآن قمت بالتثبيت والإعداد Vuex في مشروعك. يمكنك التصريح عن ملفاتك state ، getters و mutations ، actions وفي store.js
الملف ، واستخدامها في Vue component s.
مثال:
في store.js
الملف ، يمكنك التصريح عن state طفرة بسيطة مثل هذا:
في Vue component ، يمكنك استخدام state الطفرة و باستخدام الدالتين و : mapState
mapMutations
من خلال هذه الخطوات ، قمت بتثبيت التطبيق بنجاح Vuex ويمكنك استخدامه لإدارة state تطبيقك Vue.js.
مع Vuex ، يمكنك بسهولة وباستمرار إدارة التطبيق state. إنه يعزز قابلية صيانة الكود وإعادة استخدامه ، مع توفير نهج منظم لإدارة البيانات.