Vuex：在 mapState() 中找不到 [vuex] 模块命名空间

【问题标题】：Vuex: [vuex] module namespace not found in mapState() | mapGetters(): X/Vuex：在 mapState() 中找不到 [vuex] 模块命名空间 | mapGetters(): X/
【发布时间】：2020-03-29 07:08:10
【问题描述】：

根据 Vuex 文档模块化组织存储 (https://vuex.vuejs.org/guide/modules.html)，我有以下内容：

store/index.js:

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

// Default Store State for the Hug Employee Dashboard:
// import defaultState from "@/store/defaultStore";

/*eslint no-param-reassign: ["error", { "props": false }]*/
/*eslint indent: ["error", 2]*/
/*eslint arrow-body-style: ["error", "always"]*/
/*eslint-env es6*/

const surfGroups = {
  state: {
    activeSurfGroup: {},
    fetchingSurfGroupLoading: false,
    creatingSurfGroupLoading: false
  },
  getters: {
    activeSurfGroup: state => {
      return state.activeSurfGroup;
    },
  },
  mutations: {
    // API Request Mutations:
    SET_ACTIVE_SURF_GROUP(state, payload) {
      this.activeSurfGroup = payload;
    },
    // Loading Mutations:
    SET_FETCHING_SURF_GROUP_LOADING(state, payload) {
      state.fetchingSurfGroupLoading = payload;
    },
    SET_CREATING_SURF_GROUP_LOADING(state, payload) {
      state.creatingSurfGroupsLoading = payload;
    }
  },
  actions: {
    fetchSurfGroup: async ({ commit }, payload) => {
      commit("SET_FETCHING_SURF_GROUP_LOADING", true);
      // Dispatches the following Surf Levels API service:
      // this.$surfLevelsAPI.fetchActiveSurfGroup(
      //   payload.activeSurfGroupUUID
      // );
      await Vue.prototype.$surfLevelsAPI.fetchActiveSurfGroup(payload).then((response) => {
        if (response.success) {
          commit("SET_ACTIVE_SURF_GROUP", response.data);
          commit("SET_FETCHING_SURF_GROUP_LOADING", false);
        }
      });
    },
    createSurfGroup: async ({ commit }, payload) => {
      commit("SET_CREATING_SURF_GROUP_LOADING", true);
      // Dispatches the following Surf Levels API service:
      // this.$surfLevelsAPI.createNewSurfGroup(
      //   payload.activeSurfInstructor, payload.activeSurfSessionSelected, payload.activeGroupSurfers
      // );
      await Vue.prototype.$surfLevelsAPI.createNewSurfGroup(payload).then((response) => {
        if (response.success) {
          commit("SET_CREATING_SURF_GROUP_LOADING", false);
        }
      });
    }
  }
};

export default new Vuex.Store({
  modules: {
    surfGroups: surfGroups
  }
});

我觉得这一切看起来都不错。

但是，在component.Vue 内，当我 ...mapState 为：

import { mapState } from 'vuex';

export default {
  name: "MyComponent",
  // Computed Properties:
  computed: {
    ...mapState('surfGroups', [
      'creatingSurfGroupLoading',
    ]),
  },
  // Component Watchers:
  watch: {
    creatingSurfGroupLoading() {
      console.log(this.creatingSurfGroupLoading);
    },
  },
};

我收到以下错误：

[vuex] module namespace not found in mapState(): surfGroups/

我到底做错了什么？通过阅读文档，我可以看到任何明显的差异？

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

你还没有设置命名空间。

const surfGroups = {
  namespaced: true,
...

来源：https://vuex.vuejs.org/guide/modules.html#namespacing

【讨论】：

嗯，我不认为这是你的错，但它现在没有出错，但不幸的是状态没有映射。
废话，我有一个类型。谢谢@artoju！

【解决方案2】：

这表明您正在从您的应用程序的某个地方调用：

mapState("XYZ..")  
//or
magGetters("XYZ..")
//or
this.$store.dispatch('XYZ/myFunc'...
this.$store.commit('XYZ/myFunc'...

虽然您尚未将 Store 的模块 XYZ 定义为“命名空间”。为此，在模块导出中，添加 namespaced:true:

//XYZ.js

export default {
    namespaced: true,
    ...
    getters:{
        myFunc: state => {
            return "HELLO";
       }
    }
    mutations,
    actions,
};

所以，Vuex.Store({..}) 内部不需要直接更改。它会自动将该模块识别为namespaced。

附言还要检查Vuex.Store() 创建时声明的命名空间键名是否正确，例如：

Vuex.Store({
    modules:{
       abc: XYZ   <---- i.e. key name should be `XYZ` , that matters mostly.
    }
})

【讨论】：

【解决方案3】：

export default new Vuex.Store({
   modules: { userstore },
   state: {},
   mutations: {},
   actions: {},
   modules: {},
});

也许你有两个这样的模块，最后一个替换第一个。

【讨论】：