Vuex Modules注册异常：state正常但mutations、actions无法访问

问题解决方法 #

你遇到的这个问题90%的概率是Vue.use(Vuex)的执行顺序错误导致的，你现在的代码顺序是先导入模块，再安装Vuex插件，调整执行顺序即可解决：

import Vue from 'vue'
import Vuex from 'vuex'

// 第一步先安装Vuex插件
Vue.use(Vuex)

// 安装完成后再导入业务模块
import categories from "./categories"
import user from './user'

export default new Vuex.Store({
  modules: {
    user,
    categories,
  }
})

如果调整顺序后还是有问题，按以下步骤逐一排查：

• 检查模块文件的导出格式是否正确，mutations、actions、getters必须直接挂载在导出的模块对象根层级，示例如下：

// categories.js 正确写法
export default {
  // 注意命名空间属性是namespaced，末尾有d，不要写错成namespace
  namespaced: true,
  state: () => ({
    // 状态定义
  }),
  mutations: {
    // 变更定义
  },
  actions: {
    getAllCategories() {
      // 动作逻辑
    }
  }
}

• 确认模块内的属性名拼写正确，不要把mutations少写s成mutation，actions少写s成action，命名空间属性namespaced不要漏写末尾的d。
• 可以先在根Store直接写测试用的mutation和action，确认根层级的方法可以正常触发，排除Vuex本身安装版本不匹配的问题：Vue2项目必须使用Vuex 3.x版本，Vue3项目对应使用Vuex 4.x版本，版本不匹配也会导致异常。
• 如果上述排查都没问题，可以先把模块的定义直接写在store/index.js文件内测试，确认模块结构本身没有问题后，再拆分到单独的文件，排查模块导出导入过程中的问题。

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