Sarrafa State tare Vuex da Vue.js- Cikakken Jagora da Misalai na Duniya na Gaskiya

Vuex ɗakin karatu ne state na gudanarwa don Vue.js aikace-aikace, yana ba ku damar sarrafa da daidaita bayanai a cikin component s daban-daban a cikin aikace-aikacen ku. Vuex yana aiwatar da gine-ginen Flux, yana sauƙaƙa da inganci don sarrafa aikace-aikacen state.

 

Mabuɗin mahimmanci a Vuex ciki sun haɗa da

1. State

The state in Vuex yana wakiltar cibiyar adana bayanai don aikace-aikacen ku. Yana riƙe bayanan aikace-aikacen da ke buƙatar rabawa tsakanin component s daban-daban. Ga misali na ayyana a state cikin Vuex:

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

 

2. Mutations

Mutations ke da alhakin gyara a state cikin Vuex. Ayyukan aiki tare ne waɗanda ke ɗaukar nauyin halin yanzu state da abin biya azaman mahawara. Ga misalin ma'anar maye gurbi a cikin Vuex:

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

 

3. Actions

Actions ana amfani da su don gudanar da ayyukan asynchronous da aikawa mutations don gyara state. Suna iya ƙunsar kiran API, ayyuka async, ko hadaddun dabaru. Ga misali na ayyana aiki a cikin 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 ba ka damar dawo da lissafi da aka samo state daga Vuex shagon. Suna da amfani don samun dama da sarrafa bayanai kafin mayar da su zuwa ga component s. Ga misali na ayyana mai shiga cikin 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;  
    }  
  }  
});

 

Don shigarwa Vuex a cikin aikin ku Vue.js, kuna iya bin waɗannan matakan

Mataki 1: Shigar Vuex ta hanyar npm ko yarn:

npm install vuex

ko

yarn add vuex

Mataki 2: Ƙirƙiri store.js  fayil a cikin tushen directory na aikin ku. Wannan shine inda zamu bayyana da sarrafa aikace-aikacen state.

Mataki 3: A cikin store.js  fayil ɗin, shigo Vuex da ƙirƙirar sabon abin shago:

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;

Mataki na 4: A cikin main.js  fayil ɗin, shigo da kantin sayar da kayayyaki kuma ku haɗa shi zuwa aikace-aikacen ku na Vue:

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

Mataki 5: Yanzu kun shigar kuma kun saita Vuex a cikin aikin ku. Kuna iya ayyana state s, getters, mutations, da actions a cikin store.js fayil ɗin, kuma kuyi amfani da su a cikin Vue component s.

Misali:

A cikin store.js  fayil ɗin, zaku iya ayyana sauƙaƙan state maye gurbi kamar haka:

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

A cikin Vue component, zaku iya amfani da state maye gurbi ta amfani da ayyuka  da  ayyuka: mapState mapMutations

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

Tare da waɗannan matakan, kun yi nasarar shigar Vuex kuma kuna iya amfani da shi don sarrafa aikace-aikacen state ku Vue.js.

 

Tare da Vuex, zaku iya sarrafa aikace-aikacen cikin sauƙi kuma akai-akai state. Yana haɓaka ikon kiyaye lambar da sake amfani da shi, yayin samar da tsari mai tsari don sarrafa bayanai.