Vue3中调用Vuex命名空间模块mutation时出现未知类型错误的问题排查

嗨，我帮你排查下这个问题哈～你遇到的[vuex] unknown mutation type: mod/update错误，主要是因为你的Vuex模块和主store的创建方式都存在问题，咱们一步步来修正：

问题1：模块创建方式错误 #

你现在用createStore()来创建子模块了，但实际上Vuex的子模块应该是一个普通的对象，createStore()是专门用来创建根store的方法，不能用来定义子模块。另外你还犯了一个语法错误：把mutations写在了state对象里面，这会导致模块的结构完全不符合Vuex的要求。

正确的模块定义应该是这样的：

// 正确的子模块定义
const mod = {
  namespaced: true,
  state: {
    // 这里放你的模块专属状态，比如可以写 count: 0
  },
  mutations: {
    update() {
      console.log("update module")
    }
  }
}

问题2：根Store初始化方式错误 #

Vue3对应的Vuex版本是Vuex 4.x，它已经废弃了Vue2时代new Vuex.Store()的创建方式，统一使用createStore()来创建根store。你混用了两种写法，会导致模块的命名空间无法被正确识别，自然找不到mod/update这个mutation类型。

正确的根Store代码应该是这样的：

import { createStore } from 'vuex'

// 先定义好正确的子模块
const mod = {
  namespaced: true,
  state: {},
  mutations: {
    update() {
      console.log("update module")
    }
  }
}

// 用createStore创建根store
const store = createStore({
  modules: {
    mod // 这里的键名mod就是模块的命名空间名称
  },
  mutations: {
    update() {
      console.log("update main")
    }
  }
})

export default store

修正后的验证 #

你的组件里调用mutation的写法是完全正确的：

update() {
  this.$store.commit("update") // 触发根store的update mutation
  this.$store.commit("mod/update") // 触发mod模块的update mutation
}

修正完store的代码后，点击按钮就能分别打印出update main和update module，不会再出现未知类型的错误啦～

备注：内容来源于stack exchange，提问作者cert_perf