vuex未知动作类型：addToCart。

Question

大家好 im试图将产品添加到购物车数组，以便我可以渲染后，我使用vuex，但我得到这个错误。Console was cleared[vuex] unknown action type: addToCarthopefully u can give me some hint so I can fix this issueethank you so much!

这里是沙盒。https:/codesandbox.iossuspicious-minsky-9cig7?file=srccomponentsProducts.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>

Answer 1

你有一个 mutation 叫做 addToCart 但没有 action 要么创建 action 叫做 addToCart 或者直接调用突变。

this.$store.commit("addToCart", product);