Menaxhimi State me Vuex in Vue.js- Udhëzues gjithëpërfshirës dhe shembuj të botës reale

Vuex është një state bibliotekë menaxhimi për Vue.js aplikacione, që ju lejon të menaxhoni dhe sinkronizoni të dhënat në component s të ndryshme në aplikacionin tuaj. Vuex implementon arkitekturën Flux, duke e bërë të lehtë dhe efikase menaxhimin e aplikacionit state.

 

Konceptet kryesore në Vuex përfshijnë

1. State

In përfaqëson ruajtjen e centralizuar të të dhënave për aplikacionin tuaj state. Vuex Ai mban të dhënat e aplikacionit që duhet të ndahen midis component s të ndryshëm. Këtu është një shembull i përcaktimit të një state në Vuex:

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

 

2. Mutations

Mutations janë përgjegjës për modifikimin e state në Vuex. Ato janë funksione sinkrone që marrin rrymën state dhe ngarkesën si argumente. Këtu është një shembull i përcaktimit të një mutacioni në Vuex:

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

 

3. Actions

Actions përdoren për të trajtuar operacionet asinkrone dhe dërgimin mutations për të modifikuar state. Ato mund të përmbajnë thirrje API, detyra asinkronike ose logjikë komplekse. Këtu është një shembull i përcaktimit të një veprimi në 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 ju lejojnë të merrni dhe llogaritni që rrjedhin state nga Vuex dyqani. Ato janë të dobishme për qasjen dhe manipulimin e të dhënave përpara se t'i kthejnë ato në component s. Këtu është një shembull i përcaktimit të një marrësi në 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;  
    }  
  }  
});

 

Për të instaluar Vuex në Vue.js projektin tuaj, mund të ndiqni këto hapa

Hapi 1: Instaloni Vuex përmes npm ose fijeve:

npm install vuex

ose

yarn add vuex

Hapi 2: Krijoni një store.js  skedar në direktorinë rrënjë të projektit tuaj. Këtu do të deklarojmë dhe menaxhojmë aplikacionin state.

Hapi 3: Në store.js  skedar, importoni Vuex dhe krijoni një objekt të ri dyqani:

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;

Hapi 4: Në main.js  skedar, importoni dyqanin dhe lidheni atë me aplikacionin tuaj Vue:

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

Hapi 5: Tani e keni instaluar dhe konfiguruar Vuex në projektin tuaj. Ju mund të deklaroni state s-të tuaja, getters, mutations, dhe actions në store.js skedar dhe t'i përdorni ato në Vue component s.

Shembull:

Në store.js  skedar, mund të deklaroni një state mutacion të thjeshtë dhe si ky:

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

Në një Vue component, ju mund të përdorni state mutacionin dhe duke përdorur funksionet  dhe  : mapState mapMutations

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

Me këto hapa, ju e keni instaluar me sukses Vuex dhe mund ta përdorni për të menaxhuar aplikacionin state tuaj Vue.js.

 

Me Vuex, ju mund të menaxhoni lehtësisht dhe vazhdimisht aplikacionin state. Ai rrit mirëmbajtjen dhe ripërdorimin e kodit, ndërkohë që ofron një qasje të strukturuar për menaxhimin e të dhënave.