[Vue 警告]：v-on 处理程序中的错误：“TypeError：无法读取未定义的属性‘过滤器’

Question

这是第一次使用 vuex，我想我做得很好，但是在我设法拥有商店之后，我在控制台中出现了这个错误 [Vue warn]: Error in v-on handler:" TypeError: Cannot read property 'filter' of undefined 我想有很多东西要修复，希望你能给我一个关于如何解决这些问题的提示，我注意到的一件事是对于过滤器类别我需要从孩子发送数据致父母，老实说，我现在似乎不知道该怎么做，非常感谢您抽出宝贵的时间

 Products Components 
 <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>
         import {mapGetters} from 'vuex'
        export default {

          data() {
            return {

            };
          },
        computed: {
          selectedCategory(){
        return this.$store.getters.selectedCategory;
          },
           filteredProducts () {
            return this.$store.getters.filteredProducts
          }
        },

        };
        </script>

 Vuex Store

 import Vue from 'vue'
 import Vuex from 'vuex'

 Vue.use(Vuex)

 export default new Vuex.Store({

          state: {
            products: [
              {
                id: 1,
                productTitle: "Shoes",
                productImg: "../assets/ProductOne.png",
                productPrice: "246$",
                category: "Shoes"
              },
              {
                id: 2,
                productTitle: "Suits",
                productImg: "../assets/ProductOne.png",
                productPrice: "246$",
                category: "Suits"
              },
              {
                id: 3,
                productTitle: "Bags",
                productImg: "../assets/ProductOne.png",
                productPrice: "246$",
                category: "Bags"
              }
            ],
            selectedCategory: "All",

            cartItems: []
          },
          getters: {

            filteredProducts: function(state) {

              var category = state.selectedCategory

              if (category === "All") {
                return state.products;
              } else {
                return state.products.filter(function(product) {
                  return product.category === category;
                });
              }
            }
          },
          mutations: {
            selectedCategory(state){
              return state.selectedCategory
            },
          },
          actions: {
            addToCart(itemToAdd,state) {
              // Add the item or increase qty
              let itemInCart = state.cartItems.filter(item => item.id === itemToAdd.id);
              let isItemInCart = itemInCart.length > 0;

              if (isItemInCart === false) {
                state.cartItems.push(itemToAdd);
              } else {
              }
              console.log(state.cartItems)
            }
          },
          modules: {
          }
        })

Answer 1

你的问题来了

addToCart(itemToAdd,state)

第一个参数是上下文，第二个参数是你的有效载荷。

addToCart(context,itemToAdd){
   let state = context.state;
}

或者你解构它：

addToCart({ state },itemToAdd){
   ...
}