34. Gestión de estados con Vuex

Capítulo 34: Gestión de estados con Vuex

La gestión del estado es una parte esencial del desarrollo de aplicaciones de página única (SPA) sólidas y escalables. En Vue.js, se utiliza la biblioteca Vuex para este propósito. Vuex es una biblioteca de gestión de estado que sigue el patrón Flux, que fue propuesto por Facebook y se utiliza en bibliotecas como Redux (React) y Ngrx (Angular).

La idea central del patrón Flux es que el estado es unidireccional; esto significa que las acciones ocurren en una dirección y el estado cambia en respuesta a esas acciones. Esto hace que la gestión estatal sea predecible y fácil de rastrear.

Para comenzar con Vuex, necesitamos instalarlo en nuestro proyecto Vue.js. Esto se puede hacer usando el administrador de paquetes npm o Yarn.

npm instala vuex --guardar
o
hilo agregar vuex

Una vez instalado, podemos crear una tienda Vuex. La tienda Vuex es el corazón de la gestión estatal de Vuex. Contiene todo el estado de la aplicación y proporciona métodos para cambiar ese estado.

importar Vue desde 'vue';
importar Vuex desde 'vuex';

Vue.use(Vuex);

tienda constante = nueva Vuex.Store({
  estado: {
    // tu estado aquí
  },
  mutaciones: {
    // tus mutaciones aquí
  },
  acciones: {
    // tus acciones aquí
  },
  captadores: {
    // tus captadores aquí
  }
});

Hay cuatro partes principales en una tienda Vuex: estado, mutaciones, acciones y captadores.

Estado es donde almacenamos el estado de nuestra aplicación. Es un objeto JavaScript simple.

Las mutaciones son funciones que cambian el estado. Son la única forma de cambiar de estado en Vuex. Las mutaciones toman el estado actual y una carga útil como argumentos.

Las acciones son similares a las mutaciones, pero existen algunas diferencias importantes. Las acciones pueden ser asincrónicas, mientras que las mutaciones deben ser sincrónicas. Además, las acciones no cambian de estado directamente. En cambio, cometen mutaciones que alteran el estado.

Los captadores son funciones que nos permiten obtener partes de nuestro estado. Son como propiedades calculadas para nuestro estado.

Cuando usamos Vuex, siempre debemos cambiar el estado cometiendo mutaciones, no directamente. Esto nos permite realizar un seguimiento de todos los cambios de estado, lo que hace que el estado sea predecible y fácil de depurar.

Además, con Vuex, podemos dividir nuestra tienda en módulos. Cada módulo puede tener su propio estado, mutaciones, acciones y captadores. Esto nos permite administrar el estado de una manera más modular y mantener nuestra tienda Vuex organizada a medida que nuestra aplicación crece.

En resumen, Vuex es una poderosa biblioteca de administración de estado para Vue.js que nos ayuda a administrar el estado de nuestras aplicaciones de una manera predecible y eficiente. Con el uso correcto de Vuex, podemos crear aplicaciones de una sola página sólidas y escalables.

En el próximo capítulo, profundizaremos en cómo usar Vuex en un proyecto Vue.js real, incluido cómo trabajar con estados, mutaciones, acciones, captadores y módulos.

Siguiente página del libro electrónico gratuito:

85Introducción a Angular.js

3 minutos