Kusimamia State na- Mwongozo Vuex wa Vue.js Kina na Mifano ya Ulimwengu Halisi

Vuex ni state maktaba ya usimamizi ya Vue.js programu, inayokuruhusu kudhibiti na kusawazisha data katika component s tofauti katika programu yako. Vuex inatekeleza usanifu wa Flux, na kuifanya iwe rahisi na bora kudhibiti programu state.

 

Dhana muhimu katika Vuex ni pamoja na

1. State

In inawakilisha hifadhi ya data kati ya programu yako state. Vuex Inashikilia data ya programu ambayo inahitaji kushirikiwa kati ya component s tofauti. Hapa kuna mfano wa kufafanua a state in Vuex:

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

 

2. Mutations

Mutations wana jukumu la kurekebisha state in Vuex. Ni vitendakazi vya kusawazisha ambavyo huchukua mzigo wa sasa state na wa malipo kama hoja. Hapa kuna mfano wa kufafanua mabadiliko katika Vuex:

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

 

3. Actions

Actions hutumika kushughulikia shughuli za asynchronous na kutuma mutations kurekebisha state. Zinaweza kuwa na simu za API, kazi zisizolingana, au mantiki changamano. Hapa kuna mfano wa kufafanua kitendo katika 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 hukuruhusu kupata na kuhesabu inayotokana state na Vuex duka. Ni muhimu kwa kupata na kudhibiti data kabla ya kuirejesha kwa component s. Hapa kuna mfano wa kufafanua getter katika 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;  
    }  
  }  
});

 

Ili kusakinisha Vuex katika Vue.js mradi wako, unaweza kufuata hatua hizi

Hatua ya 1: Sakinisha Vuex kupitia npm au uzi:

npm install vuex

au

yarn add vuex

Hatua ya 2: Unda store.js  faili kwenye saraka ya mizizi ya mradi wako. Hapa ndipo tutakapotangaza na kudhibiti programu state.

Hatua ya 3: Katika store.js  faili, ingiza Vuex na uunde kitu kipya cha duka:

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;

Hatua ya 4: Katika main.js  faili, leta duka na uiunganishe na programu yako ya Vue:

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

Hatua ya 5: Sasa umesakinisha na kusanidi Vuex katika mradi wako. Unaweza kutangaza state s, getters, mutations, na actions katika store.js faili, na kuzitumia katika Vue component s yako.

Mfano:

Katika store.js  faili, unaweza kutangaza rahisi state na mabadiliko kama hii:

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

Katika Vue component, unaweza kutumia state na mutation kwa kutumia  na  kazi: mapState mapMutations

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

Kwa hatua hizi, umesakinisha kwa ufanisi Vuex na unaweza kuitumia kudhibiti programu state yako Vue.js.

 

Ukiwa na Vuex, unaweza kudhibiti programu kwa urahisi na mara kwa mara state. Inaboresha udumishaji wa msimbo na utumiaji tena, huku ikitoa mbinu iliyoundwa kwa usimamizi wa data.