Anteriormente ya hablamos de lo que era Redux (puedes leer aquí el artículo), hoy la pregunta es ¿Qué es Vuex?, y si ya tomamos de partida ese artículo resulta sencillo de explicar.
La respuesta corta es que Vuex se trata de una implementación de Flux, un patrón de diseño para controlar el estado de nuestras aplicaciones.
Además de esto Vuex ha sido creado para funcionar con VueJs, no es agnóstico como pudiera ser Redux, así que si usas otra tecnología para tus componentes no te sirve.
Vuex simplifica la forma en que nuestros componentes se comunican entre ellos, centralizando este proceso, la manera de hacerlo sería esta:
Si ya conoces como funciona Flux o Redux entender este esquema es pan comido, de todas formas vamos a explicar paso a paso cual es el ciclo de vida que sigue.
  • En primer lugar están los componentes, y estos tienen la capacidad de emitir (dispatch) acciones.
  • Las acciones que emiten tienen cierta lógica, tanto sincrona como asíncrona pues vemos en el esquema que es en este punto donde existe la comunicación con las API´s externas.
  • Una vez las acciones realizan toda esta lógica emiten (commit) confirmaciones que mutan el estado de nuestra aplicación ejecutando métodos específicos para cada tipo, como vemos en este punto podemos depurar nuestra aplicación.
  • Tras aplicar la mutación (las mutaciones siempre son síncronas) se altera el estado de la aplicación y los componentes afectados en el proceso vuelven a ser renderizados para mostrar los cambios.
Este ciclo cumple las normas de Flux:
  1. El store que es el lugar donde se guarda el estado (state) es el único lugar seguro para consultar estos valores.
  2. El state no puede ser modificado directamente (es de solo lectura), sino que nuestros componentes desde la vista emiten acciones para hacerlo, es decir, desde la vista se manda una petición para que se realicen los cambios.
  3. La lógica para cambiar el estado esta declarada en las mutaciones (mutations).
No es nada dificil de entender, la gran ventaja de tener este tipo de esquema es que la lógica de la comunicación entre los distintos componentes esta separada y centralizada.
Que esto sea así evitará tener separados los distintos métodos en cada uno de nuestros componentes, es más facil de mantener, es más facil de escalar, evita duplicidades, evita refactorizar el código en multiples ficheros.

¿Cómo instalarlo?

Instalar Vuex es una tarea de los más simple, lo más fácil es haciendo uso de NPM, el gestor de paquetes de NodeJs.
Tenemos que posicionar la consola en la carpeta donde se encuentre nuestro proyecto y escribir:
Si en vez de usar como gestor de paquetes NPM, usamos Yarn (si quieres saber más sobre él pulsa aquí), hay que escribir:
También podemos llamar a la librería desde un cdn o descargarla.
The following two tabs change content below.