Gestire State con Vuex in Vue.js- Guida completa ed esempi del mondo reale

Vuex è una state libreria di gestione per Vue.js le applicazioni, che consente di gestire e sincronizzare i dati tra diversi component programmi nella tua applicazione. Vuex implementa l'architettura Flux, rendendo semplice ed efficiente la gestione dell'applicazione state.

Concetti chiave Vuex inclusi

1. State

In rappresenta l'archivio dati centralizzato per l'applicazione state. Vuex Contiene i dati dell'applicazione che devono essere condivisi tra diversi component s. Ecco un esempio di definizione di a state in Vuex:

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

2. Mutations

Mutations sono responsabili della modifica state dell'in Vuex. Sono funzioni sincrone che accettano la corrente state e il payload come argomenti. Ecco un esempio di definizione di una mutazione in Vuex:

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

3. Actions

Actions vengono usati per gestire le operazioni asincrone e l'invio mutations per modificare il file state. Possono contenere chiamate API, attività asincrone o logica complessa. Ecco un esempio di definizione di un'azione in 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 consentono di recuperare e calcolare derivati state ​​dal Vuex negozio. Sono utili per accedere e manipolare i dati prima di restituirli alla component s. Ecco un esempio di definizione di un getter in 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;  
    }  
  }  
});

Per installare Vuex nel tuo Vue.js progetto, puoi seguire questi passaggi

Passaggio 1: installazione Vuex tramite npm o filato:

npm install vuex

O

yarn add vuex

Passaggio 2: crea un store.js  file nella directory principale del tuo progetto. Qui è dove dichiareremo e gestiremo l'applicazione state.

Passaggio 3: nel store.js  file, importa Vuex e crea un nuovo oggetto negozio:

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;

Passaggio 4: nel main.js  file, importa lo store e collegalo alla tua applicazione Vue:

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

Passo 5: Ora hai installato e configurato Vuex nel tuo progetto. Puoi dichiarare i tuoi state s, getters, mutations, e actions nel store.js file e usarli nei tuoi Vue component s.

Esempio:

Nel store.js  file, puoi dichiarare una semplice state e una mutazione come questa:

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

In un Vue component, puoi utilizzare state e la mutazione utilizzando le funzioni  e  : mapState mapMutations

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

Con questi passaggi, hai installato correttamente Vuex e puoi usarlo per gestire la state tua Vue.js applicazione.

Con Vuex, puoi gestire l'applicazione in modo semplice e coerente state. Migliora la manutenibilità e la riusabilità del codice, fornendo al contempo un approccio strutturato alla gestione dei dati.