Gestionarea State cu Vuex in Vue.js- Ghid cuprinzător și exemple din lumea reală

Vuex este o state bibliotecă de gestionare a Vue.js aplicațiilor, care vă permite să gestionați și să sincronizați datele din diferite component aplicații. Vuex implementează arhitectura Flux, facilitând și eficient gestionarea aplicației state.

 

Conceptele cheie Vuex includ

1. State

In reprezintă depozitul de date centralizat pentru aplicația state dvs. Vuex Deține datele aplicației care trebuie partajate între diferite component s. Iată un exemplu de definire a unui state în Vuex:

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

 

2. Mutations

Mutations sunt responsabili pentru modificarea state în Vuex. Sunt funcții sincrone care iau ca argumente curentul state și sarcina utilă. Iată un exemplu de definire a unei mutații în Vuex:

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

 

3. Actions

Actions sunt folosite pentru a gestiona operațiuni asincrone și expediere mutations pentru a modifica fișierul state. Acestea pot conține apeluri API, sarcini asincrone sau logică complexă. Iată un exemplu de definire a unei acțiuni î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 vă permit să preluați și să calculați derivate state din Vuex magazin. Sunt utile pentru accesarea și manipularea datelor înainte de a le returna în component s. Iată un exemplu de definire a unui getter î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;  
    }  
  }  
});

 

Pentru a instala Vuex în Vue.js proiectul dvs., puteți urma acești pași

Pasul 1: Instalați Vuex prin npm sau fire:

npm install vuex

sau

yarn add vuex

Pasul 2: Creați un store.js  fișier în directorul rădăcină al proiectului dvs. Aici vom declara și gestiona aplicația state.

Pasul 3: În store.js  fișier, importați Vuex și creați un nou obiect magazin:

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;

Pasul 4: În main.js  fișier, importați magazinul și conectați-l la aplicația dvs. Vue:

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

Pasul 5: Acum ați instalat și configurat Vuex în proiect. Puteți să vă declarați state s, getters, mutations, și actions în store.js fișier și să le utilizați în Vue component.

Exemplu:

În store.js  fișier, puteți declara o state mutație simplă ca aceasta:

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

Într-o Vue component, puteți utiliza state mutația și folosind funcțiile  și  : mapState mapMutations

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

Cu acești pași, ați instalat cu succes Vuex și îl puteți utiliza pentru a gestiona aplicația state dvs. Vue.js

 

Cu Vuex, puteți gestiona ușor și constant aplicația state. Acesta îmbunătățește mentenabilitatea și reutilizarea codului, oferind în același timp o abordare structurată a gestionării datelor.