Vuejs 错误：属性或方法“cart”未在实例上定义，但在渲染期间被引用。未定义属性“cartItems”

Question

我在尝试从我的 vuex 存储中获取数据时出错。

属性或方法“cart”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

属性或方法“cartItems”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件

pages/cart.vue

<template>
<div>
    <v-container>
        <section>
           <h2 class="my-4">Your Cart</h2>
           <v-divider class="my-4"></v-divider>
           <h3>Total Amount: ${{ cart }}</h3>

           <CartItem
             v-for="item in cartItems"
             :key="item.productId"
             :prod-id="item.productId"
             :name="item.name"
             :image="item.image"
             :price="item.price"
             :qty="item.qty"
           ></CartItem>
        </section>
    </v-container>
   
</div>
</template>

<script>
import CartItem from '../components/CartItem'
import { mapGetters } from 'vuex'
export default {
  components: {
      CartItem,
      computed: {
           ...mapGetters('cart',['totalSum'])
    },
    cartItems(){
      return this.$store.getters['cart/products'];
    }
      }
  }

</script>

<style scoped>
h2{
    text-align: center;
}
h3{
    text-align: center;
}
</style>

./components/CartItem.vue

<template>
    <v-container class="my-5">
    <v-row>
        <v-col
        sm="6"
        md="4"
        >
          <v-card outlined>
            <v-img :src="image" height="200px" />
            <v-card-title> {{ name}} </v-card-title>
            <v-card-subtitle> ${{ price }}</v-card-subtitle>
            <v-card-subtitle> Quantity <strong>{{ qty }}</strong> </v-card-subtitle>
            <v-card-actions>
                <div>Total: ${{ itemTotal }}</div>
                          <v-btn @click="remove()" color="success" outlined >
                              <v-icon small left> add </v-icon>
                              Remove
                          </v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
    props: ['prodId', 'name', 'image', 'price', 'qty'],

    computed: {
        itemTotal() {
            return( this.price * this.qty).toFixed(2);
        }
    },
    methods: {
        remove(){
            this.$store.dispatch('cart/removeFromCart', {productId: this.prodId})
        }
    }
}
</script>

存储/模块/cart.js

export default {
    namespaced: true,
    state(){
        return{
            items: [],
            total: 0,
            qty: 0
        }
    },

    mutations: {
        addProductToCart(state, payload) {
            const productData = payload;
            const productInCartIndex = state.items.findIndex(
                (ci) => ci.productId === productData.id
            );

            if (productInCartIndex >= 0) {
                state.items[productInCartIndex].qty++;
            } else {
                const newItem = {
                    productId: productData.id,
                    title: productData.title,
                    image: productData.image,
                    price: productData.price,
                    qty: 1,
                };
                state.items.push(newItem);
            }
            state.qty++;
            state.total += productData.price;
        },

        removeProductFromCart(state, payload) {
            const prodId = payload.productId;
            const productInCartIndex = state.items.findIndex(
                (cartItem) => cartItem.productId === prodId
            );
            const prodData = state.items[productInCartIndex];
            state.items.splice(productInCartIndex, 1);
            state.qty -= prodData.qty;
            state.total -= prodData.price * prodData.qty;
        },
    },

    actions: {
        addToCart(context, payload) {
            const prodId = payload.id;
            const products = context.rootGetters['prods/products'];
            const product = products.find(prod => prod.id === prodId);
            context.commit('addProductToCart', product);
        },
        removeFromCart(context, payload) {
            context.commit('removeProductFromCart', payload);
        }
    },
    getters: {
        products(state) {
            return state.items;
        },
        totalSum(state) {
            return state.total;
        },
        quantity(state) {
            return state.qty;
        }
    }
}

Answer 1

属性cartItems 应添加到计算选项中，例如：

export default {
  components: {
      CartItem,
     },
     computed: {
           ...mapGetters('cart',['totalSum']),
           cartItems(){
            return this.$store.getters['cart/products'];
          }
   
      }
  }