vuex unknown action type: addToCart - vue.js

Question

hello everyone im trying to add product into cart array so i can render it after , i used vuex but i got this error : Console was cleared
[vuex] unknown action type: addToCart
hopefully u can give me some hint so i can fix this issue
thank you so much !!
here is the sandbox : https://codesandbox.io/s/suspicious-minsky-9cig7?file=/src/components/Products.vue
<template>
<main>
<div class="margin"></div>
<div class="shopTitle">
<h1>Shop</h1>
</div>
<section class="categoriesSection">
<ul class="categories">
<li>
See All
</li>
<li>
Shoes
</li>
<li>
Suits
</li>
</ul>
</section>
<section>
<div class="products">
<div class="product" v-for="product in filteredProducts" :key="product.productId">
<div class="imgproduct"></div>
<div class="productDetails">
<div>
<h1>{{product.productTitle}}</h1>
</div>
<div>
<i onClickButton class="fa fa-heart"></i>
</div>
<div>
<p>{{product.productPrice}}</p>
</div>
<div>
<i onClickButton #click="addToCart(product)" class="fa fa-shopping-cart"></i>
</div>
</div>
</div>
</div>
</section>
</main>
</template>
<script>
export default {
data() {
return {};
},
computed: {
selectedCategory: {
// getter
get: function() {
return this.$store.getters.selectedCategory;
},
// setter
set: function(newValue) {
return this.$store.commit("updateCategory", newValue);
}
},
filteredProducts() {
return this.$store.getters.filteredProducts;
}
},
methods: {
addToCart: function(product) {
this.$store.dispatch("addToCart", product);
}
}
};
</script>

Answer 1

You have a mutation called addToCart but no action either create an action called addToCart or just call the mutation directly :
this.$store.commit("addToCart", product);