vuex unknown action type: addToCart

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>
          <a href="#" @click.prevent="selectedCategory ='All'">See All</a>
        </li>
        <li>
          <a href="#" @click.prevent="selectedCategory ='Shoes'">Shoes</a>
        </li>
        <li>
          <a href="#" @click.prevent="selectedCategory ='Suits'">Suits</a>
        </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>

Pierre Said Pierre Said · Accepted Answer · 2020-06-08T18:00:23

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

vuex unknown action type: addToCart

1 Answers