How I can use vuex nested modules?

Question

As Vuex documentation says, when the project start to grow we need a way to separate state management in a more self contained and modularized scalable solution. Here namespaces come in help. Sadly at the moment of writing Vuex modules section lacks of information and examples how to effectively use them.

This is my store structure

store
 |- modules
   |- core
     |- country.js
     |- region.js
     |- ...
   |- roullout
     |- site.js
 |- index.js

Here module register index.js

import Vuex from 'vuex'
// Core modules
import coreCountry from "@/store/modules/core/country";
import coreRegion from "@/store/modules/core/region";
// Rollout modules
import rolloutSite from "@/store/modules/rollout/site";

export default new Vuex.Store({
  modules: {
    // Core modules
    core: {
      country: coreCountry,
      region: coreRegion,
    },
    // Rollout modules
    rollout: {
      site: rolloutSite
    }
  }
})

Now in some component I try to define actions

methods: {
  ...mapActions('rollout/site', [
      LIST_REQUEST
  ])
}

Here the first error: rollout/site is not found because I guess rollout is a folder not a module and therefor site is a module and not a nested module of rollout.

Vuex documentation show how to use helper to bind stuff in nested modules but doesn't show the architecture of a store with nested modules.

LIST_REQUEST is an action, come from types.js and is defined as:

export const LIST_REQUEST = "rollout/site/LIST_REQUEST";

So in site.js module I can use as:

const actions = {
    [types.LIST_REQUEST]: async ({ commit }, payload= {}) => {
        // your actions here...
    },
}

Since I'm using mapActions(), instead of dispatch actions like: this.$store.dispatch() I can directly do this.LIST_REQUEST()

import {
  LIST_REQUEST
} from "@/store/types/rollout/site";

export default {
  name: "SiteList",
  created() {
    this.LIST_REQUEST()
  },
  methods: {
    ...mapActions('rollout/site', [
      LIST_REQUEST
    ])
  }
}

Here another error: LIST_REQUEST() is not a function. This error come because mapAction still have to turn the action into function

How I can fix these problems with nested modules and use index.js. Maybe I have a bit of confusion in my mind, may you help to clarify these concepts?

Brother Woodrow Brother Woodrow · Accepted Answer · 2020-11-15T15:54:46

If you want to nest modules and give them their own namespace, you should set the namespaced attribute:

export default new Vuex.Store({
  modules: {
    rollout: {
      namespaced: true,
      site: rolloutSite
    }
  }
})

When using the mapActions helper, you don't have to import anything other than the helper itself. Say that rollout/site has a method called foo, you should be able to just do this:

methods: {
    ...mapActions({ foo: 'rollout/site/foo' })
}

How I can use vuex nested modules?

1 Answers