Vuex con Namespaces

Cuando trabajamos con Vuex es muy probable que queramos utilizar namespaces para poder organizar mejor nuestras tiendas de datos y separar bien la lógica de nuestra aplicación.

En nuestro primer curso de Vuejs 2 y Vuex con Adonisjs 4 vemos cómo utilizar namespaces de una forma muy personalizada que personalmente me gusta mucho, pero existen otras formas de hacer esto, veamos una de ellas. Vuex con namespaces utilizando createNamespacedHelpers Esta es seguramente la forma más sencilla de utilizar Vuex con namespaces. Gracias a createNamespacedHelpers podremos hacer esto de forma rápida sin ninguna configuración previa, veamos un ejemplo completo.

component.vue

<template>
  <div class="cmp" v-if="id">
    {{ id }}
  </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex';
const { mapActions, mapState } = createNamespacedHelpers(
    "users"
);
export default {
  name: 'cmp',
  mounted () {
    this.getUserById(1).then(() => {
        console.log(this.id);
    })
  },
  methods: {
      ...mapActions(['getUserById'])
  },
  computed: {
      ...mapState(["id"]),
  },
}
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import userModule from './modules/userModule';

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    users: userModule
  }
})

userModule.js

export default {
    namespaced: true,
    state: {
        id: null
    },
    actions: {
        getUserById ({commit}, userId) {
            commit('setUserId', userId);
        }
    },
    mutations: {
        setUserId (state, id) {
            state.id = id;
        }
    }
}