Modularizando el store de Vuex

Hola amigos, en este post voy a estar compartiendo con ustedes cómo modularizar el store de Vuex. Vuex nos permite tener un store en nuestra app, un lugar donde se va a centralizar información necesaria que sea usable por múltiples componentes.

Como refiere su documentación, hay veces que tu store va a crecer mucho debido al alcance que tenga tu app, es por eso que hay que recurrir a la modularización para que todo quede mas organizado y legible. Quizás tengas manejo de autenticación, manejo de perfiles y modelos etc.

Creando el módulo

El primer paso que debemos hacer es crear un nuevo archivo dentro del directorio /store con el nombre representativo de lo que estamos modularizando, en mi caso es User, así que voy a terminar con un archivo user.js dentro del directorio store.

Seguidamente lo vamos a popular con un objeto que contiene las mismas propiedades que el store.

export const UserModule = {
  state: () => ({
    userPets: [],
    user: user,
    token: null,
    isAuthenticated: userService.checkAuth(),
 }),
mutations: {
    // Tus mutations aquí
 },
actions: {
    // Tus actions aquí.
 },
// Demás propiedades del Store de Vuex
}

Y bien, ya así tenemos hecho nuestro módulo, pero, como lo conectamos con el store principal?

Sencillo, basta con traernos el módulo a nuestro index.js dentro del directorio store.

import { UserModule } from './user' // Importar el módulo recién creado

export default new Vuex.Store({
  (...)
  modules: {
    user: UserModule // Especificamos que usaremos el módulo
  },
  state: {
    // Tu estado general 
  },
  mutations: {
   // Tus mutations generales
 }
// Demás propiedades del store. ej: Getters..
}

Y listo, ya Vuex sabe que debe importar nuestro recién creado UserModule en el store. Es válido aclarar que los módulos pueden acceder al estado general en sus actions, pasando a rootState como parámetro. Veamos un ejemplo:

// Un action cualquiera, pasamos rootState dentro del objeto deconstruido
isAdopted( { dispatch, commit, rootState }, petid) {
      petService.adoptPet(rootState.user.token, petid).
        then(response => { (...) }
}

Otra cosa que podemos destacar, es que los actions dentro de tus módulos van todos a un solo arreglo. Por eso debes cuidar de no escribir 2 actions con el mismo nombre en varios módulos, a no ser que establezcas la opción de namespaces, lo cual si permitiría varios actions con el mismo nombre.

Accediendo al estado modularizado

Como refiere su documentación, desde nuestros componentes podemos acceder al estado de la forma:

store.state.user // -> El estado de `UserModule`
store.state.x // -> El estado de `x` módulo que tengamos

Resumiendo

Bien, y esto ha sido todo, como ven es muy sencillo y por su puesto, hay más opciónes que tenemos a disposición para mejorar nuestros módulos.

Repaso:

1. Crear un archivo JS y dentro exportar un objeto con un estado, actions, mutations, getters que deseemos aislar.
2. Importar en el store index dicho módulo y pasarlo en la propiedad de modules
3. Consumirlo en los componentes con store.state.modulox