Vuejs Error: Property or method "cart" is not defined on the instance but referenced during render. Property"cartItems" is not defined

Question

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

属性或方法“cart”未在实例上定义，但在呈现期间被引用。通过初始化属性.

确保此属性是反应性的，无论是在数据选项中，还是对于基于 class 的组件

属性或方法“cartItems”未在实例上定义，但在呈现期间被引用。通过初始化属性

确保此属性是反应性的，无论是在数据选项中，还是对于基于 class 的组件

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>

store/modules/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'];
          }
   
      }
  }

Vuejs Error: Property or method "cart" is not defined on the instance but referenced during render. Property"cartItems" is not defined

Vuejs Error: Property or method "cart" is not defined on the instance but referenced during render. Property"cartItems" is not defined

vue.js

vuex

vuejs2

nuxt.js

vuetify.js