Unkonwn mutation type in vuex-CodePudding

I tried to mutate the state in vuex but, it always says vuex.esm-browser.js?5502:976 [vuex] unknown mutation type: addToCart. I called addToCart in mutation in two different ways as follows, but it is not working. It always throws the same error.

<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>

CodePudding user response：

Shouldn't it be: mutations and not mutation in the store file?