Zarządzanie State w Vuex — Vue.js obszerny przewodnik i przykłady z życia wzięte

Vuex to state biblioteka zarządzania Vue.js aplikacjami, umożliwiająca zarządzanie i synchronizację danych w różnych component s w aplikacji. Vuex implementuje architekturę Flux, dzięki czemu zarządzanie aplikacją jest łatwe i wydajne state.

 

Kluczowe pojęcia w Vuex include

1. State

In reprezentuje scentralizowany magazyn danych dla Twojej aplikacji state. Vuex Przechowuje dane aplikacji, które muszą być udostępniane różnym component s. Oto przykład definiowania state in Vuex:

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

 

2. Mutations

Mutations są odpowiedzialni za modyfikację pliku state in Vuex. Są to funkcje synchroniczne, które jako argumenty przyjmują prąd state i ładunek. Oto przykład zdefiniowania mutacji w Vuex:

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

 

3. Actions

Actions są używane do obsługi operacji asynchronicznych i wysyłania mutations w celu modyfikacji pliku state. Mogą zawierać wywołania interfejsu API, zadania asynchroniczne lub złożoną logikę. Oto przykład zdefiniowania akcji w 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 pozwalają pobierać i obliczać dane pochodzące state ze Vuex sklepu. Są przydatne do uzyskiwania dostępu do danych i manipulowania nimi przed zwróceniem ich do component s. Oto przykład zdefiniowania gettera w 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;  
    }  
  }  
});

 

Aby zainstalować Vuex w swoim Vue.js projekcie, możesz wykonać następujące kroki

Krok 1: Zainstaluj Vuex przez npm lub przędzę:

npm install vuex

Lub

yarn add vuex

Krok 2: Utwórz store.js  plik w katalogu głównym swojego projektu. Tutaj zadeklarujemy i będziemy zarządzać aplikacją state.

Krok 3: W store.js  pliku zaimportuj Vuex i utwórz nowy obiekt sklepu:

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: W main.js  pliku zaimportuj sklep i połącz go z aplikacją 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: Teraz zainstalowałeś i skonfigurowałeś Vuex w swoim projekcie. Możesz zadeklarować swoje state s, getters, mutations, oraz actions w store.js pliku i używać ich w swoich Vue component s.

Przykład:

W store.js  pliku możesz zadeklarować prostą state i mutację w następujący sposób:

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

W Vue component możesz użyć state mutacji and, używając funkcji  and  : mapState mapMutations

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

Dzięki tym krokom pomyślnie zainstalowałeś Vuex i możesz używać go do zarządzania state swoją Vue.js aplikacją.

 

Dzięki niemu Vuex możesz łatwo i spójnie zarządzać aplikacją state. Zwiększa łatwość konserwacji i ponownego użycia kodu, zapewniając jednocześnie ustrukturyzowane podejście do zarządzania danymi.