Understanding namespacing

By default, the actions, mutations, and getters properties in each module are registered under the global namespace, so the key or method name in each of these properties must be unique. In other words, a method name cannot be repeated in two different modules, as follows:

// entry.js
const module1 = {
  getters: {
    getNumber (state) {
      return state.number
    }
  }
}

const module2 = {
  getters: {
    getNumber (state) {
      return state.number
    }
  }
}

For the preceding example, you will see the following error due to using the same method name in the getters:

[vuex] duplicate getter key: getNumber

So, to avoid duplication, the method name must be explicitly named for each module, as follows:

getNumberModule1
getNumberModule2

Then, you can access these methods in the child component and map them, as follows:

// app.js
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      getNumberModule1: 'getNumberModule1'...