...

¿Qué es Vuex?

Vuex es una librería que ofrece Vue para gestionar el estado de la aplicación, centralizar información y funciones, haciéndolas accesibles desde cualquier componente. Se organiza de la siguiente manera:

...

Aquí podemos ver el ciclo de cómo se ejecuta:

Cómo definir nuestro Vuex store

En nuestro proyecto, definiremos Vuex en src/store/index.js:

...

Cuando tenemos diferentes módulos en nuestro store, estableceremos namepsace=true para que al utilizar su funcionalidad desde los componentes haya que indicar a qué módulo corresponden, haciendo también que el código sea más fácil de comprender.

Acceder desde componentes

Desde los componentes podemos acceder a la funcionalidad del store de las siguientes formas.

State y Getters

Para el estado y los getters disponemos respectivamente de mapState y mapGetters. Estos nos permiten mapearlos a propiedades computed:

...

this.$store.state["modulo/variable"]
this.$store.getters["modulo/getter"]

Actions

Para ejecutar acciones desde nuestros componentes, no tendremos que importar nada, simplemente usar dispatch de esta manera:

...

Las acciones sólo toman un parámetro para los datos, por lo que si queremos pasarle varios campos, deberemos utilizar un objeto que los contenga, tanto para pasarlos en el dispatch como en la definición de la acción.

Acceder desde archivos JavaScript

El store ya lo tenemos integrado en los componentes, y ya hemos visto la forma de usarlo. Desde un archivo .js lo utilizaríamos igual, pero en vez de referenciarlo con this.$store, tendríamos que importarlo y acceder directamente a store:

import store from "../store"

store.getters["token/isLogged"];
store.dispatch("modulo/action", parametro);

Persistir estado

Para que el estado sea persistente cuando se refresque la página, utilizamos vuex-persistedstate, en concreto el plugin createPersistedState(). Para esto, en primer lugar nos descargamos el paquete de npm:

...