Vuex报错：unknown mutation type: addToCart，两种调用方式均无效的问题求助

AI 小北

2026-4-30

解决Vuex中"unknown mutation type: addToCart"错误

你碰到的这个报错，问题根源其实非常简单——你在Vuex Store里把mutations写成了单数的mutation！Vuex的配置选项里，存放mutation方法的键名必须是复数形式的mutations，单数拼写会让Vuex无法识别你定义的addToCart方法，所以不管用哪种调用方式都会抛出"unknown mutation type"的错误。

第一步：修正Vuex Store的拼写错误

把Store代码里的mutation:改成mutations:，修正后的完整代码如下：

import { createStore } from "vuex";
export default createStore({
  state:{
    cart: []
  },
  mutations:{ // 这里改成复数的mutations
    addToCart(state, product){
      let item = state.cart.find(i=>i.id === product.id)
      if(item){
        item.quantity++
      }else{
        state.cart.push({...product, quantity: 1})
      }
    }
  }
})

验证你的两种调用方式

修正Store之后，你之前写的两种调用方式都是完全可行的：

方式1：使用`mapMutations`辅助函数

你的代码没有问题，修正Store后点击按钮就能正常触发addToCart mutation：

<button @click="addToCart(product)" class="add">Add</button>
<script>
import {mapMutations} from 'vuex'
export default{
  methods:{
    ...mapMutations(["addToCart"]),
  },
  props: ["product"],
}
</script>

方式2：直接调用`this.$store.commit`

这种写法也没问题，同样能正常工作：

<button @click="addToCart()" class="add">Add</button>
<script>
export default {
  props: ["product"],
  methods:{
    addToCart(){
      this.$store.commit('addToCart', this.product)
    }
  }
}
</script>