Modularizando el store de Vuex
Tags: vue, javascript, beginners, spanish
Published: 2021-08-08 22:07:16

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.

```javascript
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.

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

```javascript
// 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:

```javascript
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`