Vue2配置Vuex的todos模块后提示找不到todos命名空间如何解决

问题原因及修复方案 #

你遇到的报错是因为Vuex模块的导出和导入逻辑不符合规范，具体有两处错误： #

错误1：todos模块的导出、导入方式错误

你在/store/modules/todos/index.js里是命名导出了module变量，根store导入时用import * as todos拿到的是一个包含module属性的对象，不是Vuex要求的模块配置对象，导致模块注册失效，无法识别todos命名空间。

错误2：state、getters的导入方式错误

你用import * as state from "./state.js"导入时，拿到的state实际是{ state: { todos: [] } }的嵌套结构，不符合Vuex模块的格式要求。 #

修复后的代码 #

1. /store/modules/todos/index.js修改为：

// 直接导入对应变量，不要使用* as
import { state } from "./state.js";
import { getters } from "./getters.js";

// 改为默认导出模块配置
export default {
  namespaced: true,
  state,
  getters,
};

2. 根store的/store/index.js修改为：

import Vue from "vue";
import Vuex from "vuex";
// 直接导入todos模块的默认导出
import todos from "./modules/todos/index.js";

Vue.use(Vuex);

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

修改完成后重启项目即可，你组件中mapGetters的写法无需调整，可正常使用。

内容的提问来源于stack exchange，提问作者Question3r