...

¿Puedo usar Vuex?

SÍ, PERO...

Como vamos a ver a continuación, Vuex sirve para guardar el estado global de la aplicación. Este estado por defecto es volátil, cuando salgamos de la aplicación (ya sea cerrando la ventana, navegando a otro sitio, etc) este estado se borrará. 

Veremos que tenemos una opción para hacer este estado persistente, para poder mantenerlo aunque salgamos de la aplicación, pero esto guarda los datos en el local storage del navegador, los hace accesibles, por lo tanto, podemos usar Vuex, pero bajo ningún concepto podemos perisitir datos de usuario u otros datos sensibles.

Si necesitamos guardar estos datos, debemos hacerlos a través del backend, gestionando sesiones como se explica en esta guía: Gestión de sesiones web.

¿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:

• state: es el estado, un objeto que puede contener cualquier tipo de información; la información que almacenamos de forma centralizada en toda la aplicación.

• mutations: las mutaciones son las únicas funciones que pueden modificar el estado. Son llamadas por las acciones, e inicializadas en el componente a utilizar Se ejecutan a través de un commit o inicializarse a través de una acción. Son síncronas.

• actions: las acciones son funciones que contienen la lógica de negocio. Pueden cambiar el estado llamando a mutaciones a través de commit. Pueden llamar a otras acciones a través de dispatch. La forma de inicializarse en el componente es a través de dispatch.

• getters: son funciones que no cambian el estado, pero sí lo formatean para que podamos utilizar la información cómo necesitemos.

...

export default {
  // namespaced para mapear especificando el módulo   ...mapState('nombreModulo', ['estado', 'otroestado'])
  // también para los dispatch -> dispatch("modulo/nombreAction")
  namespaced: true,
  // ESTADO
  state: {
    cuenta: 0,
  },
  // MUTACIONES: sólo estas pueden modificar el estado
  mutations: {
    SUMAR(state, valor) {
      state.cuenta += valor;
    },
    RESETEAR(state) {
      state.cuenta = 0;
    },
  },
  // ACCIONES: se encargan de la lógica de negocio y llaman a las mutaciones
  actions: {
    sumarX({ commit }, valor) {
	  // Lógica
	  // ..
      commit("SUMAR", valor);
    },
    resetear({ commit }) {
	  // Lógica
	  // .. 
      commit("RESETEAR");
    },
  },
  // GETTERS: para propiedades calculadas
  getters: {
    isMillonario: (state) => state.cuenta > 999999,
  },
};

...

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

...

Estado y Getters

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

...

Si las variables del estado o getters que mapeamos no están en un módulo, sino directamente en elel index.jsde nuestro store, se indicaría directamente el array con sus nombres:

...

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

Mutations

Mutaciones (commit)

Las mutaciones se hacen utilizando commit. Esto lo utilizaremos para modificar variables del estado directamente. Esto es, si sólo queremos modificar el valor de variables del estado, utilizaremos commit, si necesitamos más lógica, utilizaremos acciones (lo vemos en el siguiente apartado). 

IMPORTANTE: el commit se ejecuta de forma SÍNCRONA.

EjemploPodemos llamar directamente a las mutaciones si lo que vamos a hacer es modificar una variable del estado directamente. Es decir, no es necesario crear una acción que únicamente haga un commit (que ejecuta una mutación). Por lo tanto, lo haremos así:

// Desde un componente
this.$store.commit("NOMBRE_MUTACION", valor)

// Desde un archivo js, habiendo importado store
store.commit("NOMBRE_MUTACION", valor)

...

Acciones (dispatch)

Para ejecutar acciones desde nuestros componentes, no tendremos que importar nada, simplemente usar dispatch de esta manerautilizamos dispatch. Estas pueden realizar mutaciones llamando a commit, y las utilizaremos cuando se requieran cálculos o lógica adicionales:

this.$store.dispatch("modulo/action", datos);

...

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.

IMPORTANTE: el dispatch se ejecuta de forma ASÍNCRONA. Podemos ver cómo gestionar las funciones asíncronas aquí: Funciones asíncronas en JavaScript: Promises y Async/Await.

Cómo acceder desde componentes (Composition API)

...

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 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:

...