Správa State pomocí Vuex in Vue.js- Komplexní průvodce a příklady ze skutečného světa

Vuex je state knihovna pro správu Vue.js aplikací, která vám umožňuje spravovat a synchronizovat data napříč různými component s ve vaší aplikaci. Vuex implementuje architekturu Flux, což usnadňuje a zefektivňuje správu aplikace state.

 

Mezi klíčové pojmy Vuex patří

1. State

Vstup představuje centralizované úložiště dat pro vaši aplikaci state. Vuex Obsahuje data aplikace, která je třeba sdílet mezi různými component s. Zde je příklad definice state v Vuex:

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

 

2. Mutations

Mutations jsou zodpovědní za úpravy state v Vuex. state Jsou to synchronní funkce, které jako argumenty berou aktuální a užitečné zatížení. Zde je příklad definice mutace 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 používají ke zpracování asynchronních operací a odeslání mutations k úpravě souboru state. Mohou obsahovat volání API, asynchronní úlohy nebo složitou logiku. Zde je příklad definování akce 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 vám umožní načíst a vypočítat odvozené state z Vuex obchodu. Jsou užitečné pro přístup k datům a manipulaci s nimi před jejich vrácením do component s. Zde je příklad definice getteru 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;  
    }  
  }  
});

 

Chcete-li nainstalovat Vuex do svého Vue.js projektu, můžete postupovat podle těchto kroků

Krok 1: Instalace Vuex přes npm nebo přízi:

npm install vuex

nebo

yarn add vuex

Krok 2: Vytvořte store.js  soubor v kořenovém adresáři vašeho projektu. Zde budeme deklarovat a spravovat aplikaci state.

Krok 3: V store.js  souboru importujte Vuex a vytvořte nový objekt úložiště:

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;

Krok 4: V main.js  souboru importujte obchod a propojte jej s vaší aplikací Vue:

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

Krok 5: Nyní jste nainstalovali a nastavili Vuex váš projekt. state Své s, getters, mutations a můžete deklarovat actions v store.js souboru a používat je ve svých Vue component s.

Příklad:

V store.js  souboru můžete deklarovat jednoduchou state a mutaci takto:

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

Ve Vue component můžete použít state mutaci a pomocí funkcí  a  : mapState mapMutations

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

Pomocí těchto kroků jste úspěšně nainstalovali Vuex a můžete je použít ke správě state vaší Vue.js aplikace.

 

S Vuex aplikací můžete snadno a konzistentně spravovat aplikaci state. Zlepšuje udržovatelnost a znovupoužitelnost kódu a zároveň poskytuje strukturovaný přístup ke správě dat.