...

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:

import Vue from 'vue'
import Vuex from 'vuex'
 
import moduloTexto from './modules/moduloTexto'
import moduloCuenta from './modules/moduloCuenta'
import createPersistedState from 'vuex-persistedstate'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    // Dividimos el estado en diferentes módulos que hagan referencia a diferentes ámbitos
    // Podríamos tener un módulo dedicado, por ejemplo, al login
    moduloTexto, moduloCuenta
  },
  // Para hacer que el estado persista tras refrescar la página
  plugins: [createPersistedState()]
})

Vuex tiene una instancia global, un store, que puede dividirse en diferentes módulos. Como tenemos el UI unificado para todo el Portal de Servicios, lo que haremos será definir módulos propios para nuestros servicios, y luego añadirlos al store global.

Definir un módulo para un servicio

Para definir nuestros módulos, lo haremos bajo la carpeta store/ de nuestro servicio. Por ejemploEn este ejemplo, sólo se están importando dos módulos. Podemos añadir la funcionalidad directamente en este archivo, pero si tenemos estados de diferentes ámbitos, es mejor tener varios módulos para favorecer la legibilidad del código. Los módulos se definirán en archivos .js que se encontrarán en src/store/modules/. Por ejemplo, moduloCuenta.js:

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) {
      commit("SUMAR", valor);
    },
    resetear({ commit }) {
      commit("RESETEAR");
    },
  },
  // GETTERS: para propiedades calculadas
  getters: {
    isMillonario: (state) => state.cuenta > 999999,
  },
};

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.

...

Los módulos tienen que seguir esta notación, la que hemos indicado previamente, para ser leídos correctamente por Vuex.

Añadir módulo al store global de POSE

Para añadir el módulo que hemos creado, lo haremos en el archivo app.store.modules.js, situado en /src. tendremos que importarlo, y añadirlo al final de la lista dentro del export default:

import auth from './auth/store/modules/auth';
import pages from './shared/store/modules/pages';
import language from './shared/store/modules/language';
import notifications from './shared/store/modules/notifications';
import user from './user/store/modules/user';
import services from './campus-virtual/portal-servicios/store/modules/services';
import syllabus from './campus-virtual/historico-guias/store/modules/syllabus';

export default {
  auth,
  pages,
  language,
  notifications,
  user,
  services,
  syllabus,
};

Cómo acceder desde componentes

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

...

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().

...