Vuex报错unknown mutation type: removeProductFromCart 如何解决？

报错解决方案 #

这个报错是Vuex没有匹配到你提交的removeProductFromCart mutation导致的，结合你提供的代码，按以下步骤排查即可解决：

• 场景1：你拆分了Vuex购物车模块且开启了命名空间
  如果你给购物车模块配置了namespaced: true，调用action和提交mutation时都要加模块前缀，假设你的模块命名为cart：

  // Cart组件调用处修改
  this.$store.dispatch('cart/removeProductFromCart', id)
  
  // action内部commit处修改
  commit('cart/REMOVE_PRODUCT_FROM_CART', id)
  

• 场景2：mutation/action没有正确注册到store
  你定义的方法必须显式挂载到Vuex实例的对应配置项里，不要漏写：

  // store/index.js 参考配置
  import Vue from 'vue'
  import Vuex from 'vuex'
  import { REMOVE_PRODUCT_FROM_CART } from './mutations'
  import { removeProductFromCart } from './actions'
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
    state: {
      cart: []
    },
    // 必须在这里注册mutation
    mutations: {
      REMOVE_PRODUCT_FROM_CART
    },
    // 必须在这里注册action
    actions: {
      removeProductFromCart
    }
  })
  

• 场景3：存在其他位置直接提交了错误的mutation名
  你给出的action里commit的是大写的REMOVE_PRODUCT_FROM_CART，和定义的mutation名一致，但报错提示的是小驼峰的removeProductFromCart，排查下有没有代码没有走action，直接调用了$store.commit('removeProductFromCart', id)，改成和mutation名一致的大写即可。

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