Gestión State con Vuex in Vue.js- Guía completa y ejemplos del mundo real

Vuex es una state biblioteca de administración para Vue.js aplicaciones que le permite administrar y sincronizar datos entre diferentes component s en su aplicación. Vuex implementa la arquitectura Flux, por lo que es fácil y eficiente administrar la aplicación state.

 

Conceptos clave en Vuex incluyen

1. State

El state in Vuex representa el almacén de datos centralizado para su aplicación. Contiene los datos de la aplicación que deben compartirse entre diferentes component s. Aquí hay un ejemplo de cómo definir a state en Vuex:

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

 

2. Mutations

Mutations son responsables de modificar el state en Vuex. Son funciones síncronas que toman state como argumentos la corriente y el payload. Aquí hay un ejemplo de cómo definir una mutación en Vuex:

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

 

3. Actions

Actions se utilizan para manejar operaciones asincrónicas y despacho mutations para modificar el archivo state. Pueden contener llamadas API, tareas asíncronas o lógica compleja. Aquí hay un ejemplo de cómo definir una acción en 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 le permite recuperar y calcular derivados state de la Vuex tienda. Son útiles para acceder y manipular datos antes de devolverlos al component s. Aquí hay un ejemplo de cómo definir un captador en 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;  
    }  
  }  
});

 

Para instalar Vuex en su Vue.js proyecto, puede seguir estos pasos

Paso 1: instalar Vuex a través de npm o yarn:

npm install vuex

o

yarn add vuex

Paso 2: Cree un store.js  archivo en el directorio raíz de su proyecto. Aquí es donde declararemos y gestionaremos la aplicación state.

Paso 3: en el store.js  archivo, importe Vuex y cree un nuevo objeto de tienda:

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;

Paso 4: en el main.js  archivo, importe la tienda y vincúlela a su aplicación Vue:

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

Paso 5: Ahora ha instalado y configurado Vuex su proyecto. Puede declarar sus state s, getters, mutations y actions en el store.js archivo y usarlos en sus Vue component s.

Ejemplo:

En el store.js  archivo, puede declarar un simple state y una mutación como esta:

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

En un Vue component, puede usar la state mutación y usando las  funciones  y: mapState mapMutations

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

Con estos pasos, lo ha instalado con éxito Vuex y puede usarlo para administrar el state de su Vue.js aplicación.

 

Con Vuex, puede administrar la aplicación de manera fácil y consistente state. Mejora la capacidad de mantenimiento y reutilización del código, al tiempo que proporciona un enfoque estructurado para la gestión de datos.