Vuex dispatch调用addUserAction报unknown action type错误

触发[vuex] unknown action type: addUserAction报错的核心原因有2个：

• HomePage模块导入语法错误：HomePage模块使用export default导出Vuex配置，但根store中采用import * as HomePage的命名空间导入方式，这种写法会将模块的默认导出内容挂载到导入对象的default属性上，Vuex无法识别到合法的模块配置，导致HomePage模块未被正确注册，模块内部的action、mutation都不会挂载到store实例上。
• 根store存在冗余未定义配置：代码中直接引用了state、getters、actions、mutations变量但未做对应导入，会导致store初始化异常，进一步影响模块注册。

如果采用Vuex推荐的命名空间模块化方案，未携带模块路径的dispatch调用也会触发同类报错。

1. 修正模块导入语法
   将根store中HomePage模块的导入方式改为默认导入：

// 原错误写法
// import * as HomePage from "./HomePage/home"
// 修正后
import HomePage from "./HomePage/home"

2. 清理根store冗余配置
   如果根节点没有单独定义state、getters、actions、mutations逻辑，直接删除对应未定义的配置项，避免变量未定义报错：

export default new Vuex.Store({
  modules: {
    HomePage
  }
  // 删除无导入的state、getters、actions、mutations配置
})

3. （推荐）开启模块命名空间
   为了避免多模块下同名action、mutation的命名冲突，建议给HomePage模块开启命名空间隔离，在模块配置中新增namespaced: true字段：

export default {
  namespaced: true, // 新增该配置
  state: () => ({
    categories: [],
    users: []
  }),
  mutations: {
    GET_CATEGORIES(state, categories) {
      state.categories = categories
    },
    ADD_USER(state, user) {
      state.users.push(user)
    }
  },
  actions: {
    getEcommCategories({ commit }) {
      return axios.get("/api/ecommerceCategories").then(res => {
        commit('GET_CATEGORIES', res.data.data);
      })
    },
    addUserAction({ commit }, user) {
      return commit('ADD_USER', user)
    }
  }
}

4. 修正组件内dispatch调用路径
   开启命名空间后，调用action需要携带模块名前缀：

add() {
  // 原错误写法
  // this.$store.dispatch('addUserAction', this.user)
  // 修正后
  this.$store.dispatch('HomePage/addUserAction', this.user)
}

如果暂时不开启命名空间，完成前两步修复后，原dispatch写法可以正常运行，但不推荐在多模块项目中使用全局注册的写法，后续极易出现命名冲突问题。

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