Dominando Vuex - De cero a héroe

Hola Habr! Les presento la traducción del artículo "Dominando Vuex - Zero to Hero" por Sanath Kumar.

La documentación oficial de Vuex lo define como un patrón de gestión de estado + biblioteca para aplicaciones Vue.js. ¿Pero qué significa eso? ¿Qué es un patrón de gestión estatal?

Imagine que está trabajando en una gran aplicación web con cientos de rutas y componentes. ¿No sería más fácil si pudiéramos almacenar todos los datos que necesitaríamos en una aplicación en un almacenamiento centralizado?

Cada componente o ruta dentro de nuestra aplicación solicitará datos del estado de Vuex y transferirá los datos modificados nuevamente al estado.

En esencia, el estado de Vuex puede verse como la única fuente de verdad para toda la aplicación.

Los datos se almacenan dentro del estado como un objeto JSON. Por ejemplo:

state: { name: "John Doe", age: "28" } 

Pero, ¿cómo pueden nuestros componentes y rutas acceder a los datos almacenados en nuestro estado? Para hacer esto, necesitamos definir captadores dentro de nuestro repositorio Vuex que devolverán los datos del repositorio a nuestros componentes. Veamos cómo se ve un getter simple, que obtiene el nombre de nuestro repositorio:

 getters: { NAME: state => { return state.name; }, } 

Observe que el nombre del captador está en mayúsculas. Esto es solo una recomendación de estilo de código. No es necesario seguirlo si no te gusta.

Ahora que hemos definido un captador para el nombre, es increíblemente fácil obtener el valor del nombre dentro de nuestro componente. El siguiente código le permite hacer esto.

 let name = this.$store.getters.NAME; 

Descubrimos cómo obtener datos del almacenamiento. Ahora veamos cómo podemos establecer los datos en el repositorio. Definiremos setters, ¿verdad? Además, los setters de Vuex se nombran un poco diferente. Definimos una mutación para establecer datos en nuestro estado Vuex.

 mutations: { SET_NAME: (state, payload) => { state.name = payload; }, } 

¿Qué más es la carga útil? La carga útil son los datos transmitidos a nuestra mutación desde el componente que hace la mutación. ¿Cómo podemos hacer esto? Muy simple:

 this.$store.commit('SET_NAME', your_name); 

Este código cambiará el estado de la aplicación y establecerá cualquier valor asignado a your_name para la propiedad de nombre dentro de nuestro repositorio.

MUTACIONES SINCRONICAS

Imagine que tenemos una lista de nombres almacenados en una base de datos en un servidor remoto. El servidor nos proporciona un punto final que devuelve una serie de nombres que se pueden usar en nuestro Vue.js. Por supuesto, podemos usar Axios para consultar el punto final y obtener los datos.

 let {data} = await Axios.get('https://myapiendpoint.com/api/names'); 

Después de eso, podemos pasar la matriz devuelta a nuestro estado Vuex de la tienda usando una mutación. Fácil, verdad? Pero en realidad no. Las mutaciones son síncronas, y no podemos ejecutar operaciones asíncronas, como llamadas de API, dentro de una mutación.

¿Qué debemos hacer entonces? Crea acciones .

Las acciones son como mutaciones, pero en lugar de cambiar directamente el estado, hacen una mutación. ¿Suena confuso? Veamos el anuncio de la acción.

 actions: { SET_NAME: (context, payload) { context.commit('SET_NAME', payload); }, } 

Definimos una acción llamada SET_NAME que toma el contexto y la carga útil como parámetros. La acción confirma la mutación SET_NAME, creada anteriormente, con los datos que se le pasan, es decir, su_nombre .

Ahora, en lugar de invocar la mutación directamente, nuestros componentes activan la acción SET_NAME con un nuevo nombre como datos de la siguiente manera:

 this.$store.dispatch('SET_NAME', your_name); 

Luego, la acción inicia la mutación con los datos que se le pasan, es decir, su_nombre .

Pero por que?

Quizás se pregunte por qué se requiere una declaración de acción si simplemente podemos iniciar mutaciones con un nuevo valor directamente desde nuestros componentes. Como se mencionó anteriormente, las mutaciones son sincrónicas, pero no acciones.

En el ejemplo anterior, el caso se considera cuando necesita actualizar el valor del nombre, pero no solo en su estado, sino también en la base de datos que se ejecuta en el servidor remoto. Estoy seguro de que así es como pretende utilizar Vuex en un proyecto real en el 99% de los casos. Eche un vistazo al siguiente fragmento de código:

 mutations: { SET_NAME: (state, name) => { state.name = name; }, }, actions: { SET_NAME: async (context, name) => { let {data} = await Axios.post('http://myapiendpoint.com/api/name', {name: name}); if (data.status == 200) { context.commit('SET_NAME', name); } }, } 

El código en sí se explica por sí mismo. Usamos Axios para enviar el nombre al punto final. Si la solicitud POST se realizó correctamente y el valor del nombre del campo se modificó correctamente en el servidor, iniciamos la mutación SET_ NAME para actualizar el valor del nombre dentro de nuestro estado.

TOMA PRÁCTICA NUNCA INICIES MUTACIONES DIRECTAMENTE. PARA ESTE SIEMPRE USE ACCIONES.

Configurar el almacenamiento de Vuex en Vue.JS

Profundicemos más y descubramos cómo podemos implementar Vuex en una aplicación real.

Paso 1. Instala Vuex

 npm install --save vuex 

Paso 2. Crear un repositorio de Vuex

1. Cree el directorio de la tienda en la raíz de nuestra aplicación.
2. Cree el archivo index.js en este directorio y use el siguiente código para crear un nuevo repositorio.

 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export const store = new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {}, }); 

Paso 3. Agregar almacenamiento Vuex a la aplicación Vue.JS

1. Importe el repositorio al archivo main.js:

 import {store} from './store'; 

2. Agregue almacenamiento a la instancia de Vue, como se muestra a continuación:

 new Vue({ el: '#app', store, router, render: h => h(App), }); 

Ahora podemos agregar variables de estado, captadores, mutaciones y acciones a nuestro repositorio Vuex.

Ejemplo

Eche un vistazo al repositorio de Vuex de una aplicación de lista de tareas simple. "¡No solo otra lista de tareas pendientes!". ¿Eh? No te preocupes Al final de este artículo, aprenderá cómo usar todo el poder y el poder de Vuex.

 import Vue from 'vue'; import Vuex from 'vuex'; import Axios from 'axios'; Vue.use(Vuex); export const store = new Vuex.Store({ state: { todos: null, }, getters: { TODOS: state => { return state.todos; }, }, mutations: { SET_TODO: (state, payload) => { state.todos = payload; }, ADD_TODO: (state, payload) => { state.todos.push(payload); }, }, actions: { GET_TODO: async (context, payload) => { let {data} = await Axios.get('http://yourwebsite.com/api/todo'); context.commit('SET_TODO', data); }, SAVE_TODO: async (context, payload) => { let {data} = await Axios.post('http://yourwebsite.com/api/todo'); context.commit('ADD_TODO', payload); }, }, }); 

Agregar un nuevo elemento a la lista de tareas

Dentro de su componente, inicie la acción SAVE_TODO pasándole un nuevo elemento de tarea pendiente, como se muestra en el fragmento de código a continuación.

 let item = 'Get groceries'; this.$store.dispatch('SAVE_TODO', item); 

La acción SAVE_TODO realiza una solicitud POST al punto final y luego inicia la mutación ADD_TODO , que agrega un elemento de tarea pendiente a la variable de estado todos .

Obtención de tareas pendientes

Dentro del bloque montado () de su componente, inicie la segunda acción GET_TODO , que recibe todos los elementos de tareas desde el punto final y los almacena en la variable de estado todos , iniciando la mutación SET_TODO:

 mounted() { this.$store.dispatch('GET_TODO'); } 

Acceda a tareas pendientes dentro de un componente

Para acceder al elemento todos dentro de un componente, cree una propiedad calculada:

 computed: { todoList() { return this.$store.getters.TODOS; }, } 

Dentro del componente, puede acceder a la propiedad calculada:

 <div class="todo-item" v-for="item in todoList"></div> 

Usando el método mapGetters

Hay una manera aún más fácil de acceder a las tareas pendientes dentro de un componente utilizando el método mapGetters proporcionado por Vuex.

 import {mapGetters} from 'vuex'; computed : { ...mapGetters(['TODOS']), //    } 

Es posible que ya haya adivinado que el código dentro de la plantilla debe cambiarse, como se muestra en el fragmento a continuación.

 <div class="todo-item" v-for="item in TODOS"></div> 

Observe cómo usamos el operador de distribución ES6 [...] dentro de nuestras propiedades calculadas.

ALMACENAMIENTO DE VUEX NO ES SOLO LA FUENTE DEL ESTADO ACTUAL DE SU APLICACIÓN. TAMBIÉN ES EL ÚNICO PUNTO QUE DEBE CAMBIAR ESTE ESTADO.

Esto requiere una pequeña explicación. Ya hemos aprendido cómo crear acciones para recibir e instalar elementos de tareas en nuestro repositorio. ¿Qué sucede si necesitamos actualizar un elemento y marcarlo? ¿Dónde ejecutamos el código para esto?

En Internet puede encontrar diferentes opiniones sobre este asunto. La documentación también carece de una guía clara al respecto.

Recomendaría almacenar todas las llamadas API dentro de las acciones en su repositorio Vuex. Por lo tanto, cada cambio de estado ocurre solo dentro del repositorio, lo que facilita la depuración y simplifica la comprensión del código, y también facilita la edición del código.

Organización del código

Guardar todas las variables de estado, captadores, acciones y mutaciones en un archivo rápidamente lo hará engorroso tan pronto como comience a trabajar con aplicaciones grandes. Veamos cómo puede organizar el almacenamiento en varios archivos como módulos.

Cree un nuevo directorio dentro de su repositorio y asígnele el nombre módulos . Agregue el archivo todos.js al directorio creado que contiene el siguiente código:

 const state = {}; const getters = {}; const mutations = {}; const actions = {}; export default { state, getters, mutations, actions, }; 

Ahora podemos mover las variables de estado, captadores, mutaciones y acciones del archivo index.js al archivo todos.js . Recuerde importar Axios . Todo lo que necesitamos hacer es informarle a Vuex que creamos el módulo de almacenamiento y dónde encontrarlo. El archivo index.js actualizado debería verse así:

 import Vue from 'vue'; import Vuex from 'vuex'; import Axios from 'axios'; import todos from './modules/todos'; Vue.use(Vuex); export const store = new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {}, modules: { todos, }, }); 

El archivo todos.js se verá así:

 import Axios from 'axios'; state = { todos: null, }; getters = { TODOS: state => { return state.todos; }, }; mutations = { SET_TODO: (state, payload) => { state.todos = payload; }, ADD_TODO: (state, payload) => { state.todos.push(payload); }, }; actions = { GET_TODO: async (context, payload) => { let {data} = await Axios.get('http://yourwebsite.com/api/todo'); context.commit('SET_TODO', data); }, SAVE_TODO: async (context, payload) => { let {data} = await Axios.post('http://yourwebsite.com/api/todo'); context.commit('ADD_TODO', payload); }, }; export default { state, getters, mutations, actions, }; 

Resumen

1. El estado de la aplicación se almacena como un objeto JSON grande.
2. Los captadores se utilizan para acceder a los valores almacenados en la tienda.
3. Las mutaciones actualizan su condición. Debe recordarse que las mutaciones son sincrónicas.
4. Todas las operaciones asincrónicas deben realizarse dentro de las acciones . Las acciones cambian de estado, iniciando mutaciones.
5. Establezca una regla para iniciar mutaciones exclusivamente a través de la acción .
6. Los módulos se pueden usar para organizar su almacenamiento en varios archivos pequeños.

Vuex hace que trabajar con Vue sea mucho más fácil y divertido. Si es un principiante, puede haber situaciones en las que le resulte difícil decidir si usar Vuex en ciertas áreas de su aplicación. Sigue tu instinto. Alcanzarás alta velocidad bastante rápido.