الإدارة State باستخدام- دليل Vuex شامل Vue.js وأمثلة من العالم الحقيقي

Vuex هي state مكتبة إدارة للتطبيقات Vue.js ، مما يسمح لك بإدارة البيانات ومزامنتها عبر component تطبيقات مختلفة في تطبيقك. Vuex ينفذ بنية Flux ، مما يجعل إدارة التطبيق سهلة وفعالة state.

 

Vuex تشمل المفاهيم الرئيسية

1. State

state يمثل in مخزن Vuex البيانات المركزي لتطبيقك. يحتفظ ببيانات التطبيق التي يجب مشاركتها بين مختلف component s. فيما يلي مثال على تحديد state in Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: {  
    count: 0,  
    todos: []  
  }  
});

 

2. Mutations

Mutations هي المسؤولة عن تعديل state في Vuex. إنها وظائف متزامنة تأخذ التيار state والحمولة كوسائط. فيما يلي مثال على تحديد الطفرة في Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {  
    increment(state) {
      state.count++;  
    },  
    decrement(state) {
      state.count--;  
    }  
  }  
});

 

3. Actions

Actions تُستخدم للتعامل مع العمليات غير المتزامنة والإرسال mutations لتعديل ملف state. يمكن أن تحتوي على استدعاءات API أو مهام غير متزامنة أو منطق معقد. فيما يلي مثال على تحديد إجراء في Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: { /* mutations definition */ },
  actions: {  
    async fetchData({ commit }) {  
      const response = await fetch('https://api.example.com/data');  
      const data = await response.json();  
      commit('updateData', data);  
    }  
  }  
});

 

4. Getters

Getters تسمح لك باسترداد وحساب المشتق state من Vuex المتجر. إنها مفيدة للوصول إلى البيانات ومعالجتها قبل إعادتها إلى component s. فيما يلي مثال على تعريف الطالب في Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { todos: [...] },
  getters: {  
    completedTodos(state) {  
      return state.todos.filter(todo => todo.completed);  
    },  
    todoCount(state) {  
      return state.todos.length;  
    }  
  }  
});

 

للتثبيت Vuex في Vue.js مشروعك ، يمكنك اتباع هذه الخطوات

الخطوة 1: التثبيت Vuex عبر npm أو الغزل:

npm install vuex

أو

yarn add vuex

الخطوة 2: قم بإنشاء store.js  ملف في الدليل الجذر لمشروعك. هذا هو المكان الذي سنعلن فيه التطبيق ونديره state.

الخطوة 3: في store.js  الملف ، قم باستيراد Vuex وإنشاء كائن تخزين جديد:

import Vue from 'vue';  
import Vuex from 'vuex';  
  
Vue.use(Vuex);  
  
const store = new Vuex.Store({  
  // Declare your states, getters, mutations, and actions here  
});  
  
export default store;

الخطوة 4: في الملف main.js  ، قم باستيراد المتجر واربطه بتطبيق Vue الخاص بك:

import Vue from 'vue';  
import App from './App.vue';  
import store from './store';  
  
new Vue({  
  store,  
  render: h => h(App),  
}).$mount('#app');

الخطوة 5: الآن قمت بالتثبيت والإعداد Vuex في مشروعك. يمكنك التصريح عن ملفاتك state ، getters و mutations ، actions وفي store.js الملف ، واستخدامها في Vue component s.

مثال:

في store.js  الملف ، يمكنك التصريح عن state طفرة بسيطة مثل هذا:

const store = new Vuex.Store({
  state: {  
    count: 0  
  },  
  mutations: {  
    increment(state) {
      state.count++;  
    }  
  }  
});

في Vue component ، يمكنك استخدام state الطفرة و باستخدام الدالتين  و  : mapState mapMutations

import { mapState, mapMutations } from 'vuex';  
  
export default {  
  computed: {  
    ...mapState(['count'])  
  },  
  methods: {  
    ...mapMutations(['increment'])  
  }  
};

من خلال هذه الخطوات ، قمت بتثبيت التطبيق بنجاح Vuex ويمكنك استخدامه لإدارة state تطبيقك Vue.js.

 

مع Vuex ، يمكنك بسهولة وباستمرار إدارة التطبيق state. إنه يعزز قابلية صيانة الكود وإعادة استخدامه ، مع توفير نهج منظم لإدارة البيانات.