Upravljanje State z Vuex in Vue.js- izčrpen vodnik in primeri iz resničnega sveta

Vuex je state knjižnica za upravljanje Vue.js aplikacij, ki vam omogoča upravljanje in sinhronizacijo podatkov v različnih component s-ih v vaši aplikaciji. Vuex implementira arhitekturo Flux, kar omogoča enostavno in učinkovito upravljanje aplikacije state.

 

Ključni koncepti Vuex vključujejo

1. State

Vhod predstavlja centralizirano shrambo podatkov za vašo aplikacijo state. Vuex Vsebuje podatke aplikacije, ki jih je treba deliti med različnimi component s. Tukaj je primer definiranja state v Vuex:

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

 

2. Mutations

Mutations so odgovorni za spreminjanje state v Vuex. So sinhrone funkcije, ki kot argumenta sprejmejo trenutni state in koristni tovor. Tukaj je primer definiranja mutacije v Vuex:

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

 

3. Actions

Actions se uporabljajo za obdelavo asinhronih operacij in pošiljanje mutations za spreminjanje state. Vsebujejo lahko klice API-ja, asinhrone naloge ali kompleksno logiko. Tukaj je primer definiranja dejanja v 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 vam omogočajo, da pridobite in izračunate, izpeljano state iz Vuex trgovine. Uporabni so za dostop do podatkov in obdelavo podatkov, preden jih vrnete s component. Tukaj je primer definiranja getterja v 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;  
    }  
  }  
});

 

Če želite namestiti Vuex v svoj Vue.js projekt, lahko sledite tem korakom

1. korak: Namestite Vuex prek npm ali yarn:

npm install vuex

oz

yarn add vuex

2. korak: ustvarite store.js  datoteko v korenskem imeniku vašega projekta. Tukaj bomo prijavili in upravljali aplikacijo state.

3. korak: V store.js  datoteko uvozite Vuex in ustvarite nov predmet trgovine:

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. korak: V main.js  datoteko uvozite trgovino in jo povežite s svojo aplikacijo Vue:

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

5. korak: Zdaj ste namestili in nastavili Vuex svoj projekt. state Svoje s, getters, mutations in lahko navedete actions v store.js datoteki ter jih uporabite v svojih Vue component s.

primer:

V store.js  datoteki lahko deklarirate preprosto state in mutacijo, kot je ta:

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

V Vue component lahko uporabite state mutacijo in z uporabo funkcij  in  : mapState mapMutations

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

S temi koraki ste uspešno namestili Vuex in jo lahko uporabljate za upravljanje state svoje Vue.js aplikacije.

 

Z Vuex aplikacijo lahko enostavno in dosledno upravljate state. Izboljša možnost vzdrževanja in ponovne uporabe kode, hkrati pa zagotavlja strukturiran pristop k upravljanju podatkov.