Managing State with Vuex in Vue.js- Treoir Chuimsitheach agus Samplaí Fíor-Dhomhanda

Vuex is state leabharlann bhainistíochta é d’ Vue.js fheidhmchláir, a ligeann duit sonraí a bhainistiú agus a shioncronú thar component s éagsúla i d’fheidhmchlár. Vuex cuireann an ailtireacht Flux i bhfeidhm, rud a fhágann go bhfuil sé éasca agus éifeachtach an t-iarratas a bhainistiú state.

 

Vuex I measc na bpríomhchoincheapa tá

1. State

Léiríonn an state t-in Vuex stór sonraí láraithe d'iarratas. Coinníonn sé sonraí an fheidhmchláir ar gá iad a roinnt i measc component s. Seo sampla de shainmhíniú state i Vuex:

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

 

2. Mutations

Mutations freagrach as an state i Vuex. Is feidhmeanna sioncronacha iad a ghlacann an t-ualach reatha state agus an pálasta mar argóintí. Seo sampla de shainmhíniú ar shóchán i Vuex:

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

 

3. Actions

Actions a úsáidtear chun oibríochtaí asincrónacha a láimhseáil agus seolta mutations chun an state. Is féidir leo glaonna API, tascanna async, nó loighic chasta a bheith iontu. Seo sampla de ghníomhaíocht a shainiú i 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 ligean duit a dhíorthaítear ón siopa a aisghabháil agus a ríomh Vuex. Tá siad úsáideach chun sonraí a rochtain agus a láimhseáil sula gcuirtear ar ais chuig an component s. Seo sampla de shainmhíniú faighteoir i 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;  
    }  
  }  
});

 

Chun suiteáil a dhéanamh Vuex i do Vue.js thionscadal, is féidir leat na céimeanna seo a leanúint

Céim 1: Suiteáil Vuex trí npm nó snáth:

npm install vuex

nó

yarn add vuex

Céim 2: Cruthaigh store.js  comhad i bhfréamheolaire do thionscadal. Seo an áit a ndéanfaimid an t-iarratas a fhógairt agus a bhainistiú state.

Céim 3: Sa store.js  chomhad, iompórtáil Vuex agus cruthaigh réad siopa nua:

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;

Céim 4: Sa main.js  chomhad, allmhairiú an siopa agus é a nascadh le d'iarratas Vue:

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

Céim 5: Anois tá tú suiteáilte agus curtha ar bun Vuex i do thionscadal. Is féidir leat do state s, getters, mutations, agus actions sa store.js chomhad a dhearbhú, agus iad a úsáid i do Vue component s.

Sampla:

Sa store.js  chomhad, is féidir leat state sóchán simplí mar seo a dhearbhú:

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

I Vue component, is féidir leat an state agus an sóchán a úsáid trí na  agus  feidhmeanna a úsáid: mapState mapMutations

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

Leis na céimeanna seo, d'éirigh leat a shuiteáil Vuex agus is féidir leat é a úsáid chun state d' Vue.js fheidhmchlár a bhainistiú.

 

Leis Vuex, is féidir leat an t-iarratas a bhainistiú go héasca agus go comhsheasmhach state. Cuireann sé le hinbhuanaitheacht agus ath-inúsáidteacht an chóid, agus ag an am céanna cuireann sé cur chuige struchtúrtha ar fáil do bhainistiú sonraí.