vuex 中的未知突变类型

Question

我试图改变 vuex 中的状态，但它总是显示 vuex.esm-browser.js?5502:976 [vuex] unknown mutation type: addToCart。我以如下两种不同的方式调用了 addToCart 突变，但它不起作用。它总是抛出相同的错误。

<button @click="addToCart(product)" class="add">Add</button>

import {mapMutations} from 'vuex'
    export default{
        methods:{
            ...mapMutations(["addToCart"]),
        },
        props: ["product"],
    }
</script>

Vuex store

import { createStore } from "vuex";

export default createStore({
    state:{
        cart: []
    },
    mutation:{
        addToCart(state, product){
            let item = state.cart.find(i=>i.id === product.id)

            if(item){
                item.quantity++
            }else{
                state.cart.push({...product, quantity: 1})
            }
        }
    }
})

I even tried this also

<button @click="addToCart()" class="add">Add</button>

<script>
   props: ["product"],
   methods:{
        addToCart(){
        this.$store.commit('addToCart', this.product)
     }
   }
</script>

Answer 1

商店文件中不应该是：mutations而不是mutation吗？

vuex 中的未知突变类型

Unkonwn mutation type in vuex

javascript

mutation

node.js

vue.js

vuex