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

Question

我也是 nuxtjs 和 vuex 的新手，不幸的是我在尝试从 vuex 获取数据时遇到了一些错误；

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

./pages/index.vue

<template>
  
  <div>
    <TheCarousel />


    <SellingItems 
     v-for="prod in products"
     :key="prod.id"
     :id="prod.id"
     :image="prod.image"
     :name="prod.name"
     :price="prod.price"
    />
  </div>


</template>

<script>
import TheCarousel from '../components/TheCarousel'
import SellingItems from '../components/sellingItems'
import { mapGetters } from 'vuex'

export default {
  components: {
    TheCarousel,
    SellingItems
  },

  computed: {
    //  products(){
    //    return this.$store.getters['prods/products']
    //  }
     ...mapGetters(['prods/products'])
  }
}
</script>

./components/sellingItems.vue

<template>
  <v-container class="my-5">
    <h2>Top Selling Items</h2>
    <v-divider class="my-4"></v-divider>

    <v-row>
        <v-col
        sm="6"
        md="4"
        v-for="product in products"
        :key="product.name">
          <v-card outlined>
            <v-img :src="product.image" height="200px" />
            <v-card-title> {{ product.name}} </v-card-title>
            <v-card-subtitle> ${{ product.price }}</v-card-subtitle>

            <v-card-actions>
                          <v-btn color="success" outlined to="#">
                              <v-icon small left> add </v-icon>
                              Add to Cart
                          </v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
    </v-row>
  </v-container>
  
</template>

<script>
export default {
   props: ['id', 'image', 'name', 'price'],
}
</script>

<style>

</style>

存储/模块/product.js

export default {
    namsespaced: true,
    state(){
        return{
            products: [
                {
                    id: '1',
                    name: 'Playstation 4', 
                    price: 200, 
                    image: 'img/ps4.jpg'
                },
                {
                    id: '2', 
                    name: 'Playstation 5', 
                    price: 700, 
                    image: 'img/ps5.jpg'
                },
                {
                    id: '3', 
                    name: 'Nintendo wii', 
                    price: 100, 
                    image: 'img/wii.jpg'
                }
            ]
        }
    },

    getters: {
        products(state){
            return state.products;
        }
    }
}

Answer 1

1. 您正在将每个项目的属性传递给 SellingItem，但在销售项目时，您正在循环访问该组件中不存在的 products。您的意思是改用传入的属性吗？

要使用传入的属性，引用它们的方式与在data 或computed 中定义的方式相同：

    <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-actions>
                          <v-btn color="success" outlined to="#">
                              <v-icon small left> add </v-icon>
                              Add to Cart
                          </v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
    </v-row>

1. 您的mapGetters 未在 index.vue 中正确定义。试试这个：

...mapGetters('products', ['products'])

你会像this.products一样引用它。

根据我的理解，只有当这个 Vuex 存储嵌套在父存储中或者从另一个 Vuex 存储中调用 getter 时，才需要命名空间。对于您的示例，使用命名空间从单独的 Vuex 商店的操作中调用如下所示：const value = context.rootGetters['products/products']

说了这么多，如果您的 getter 只是返回状态项本身而没有任何其他逻辑，您不妨直接调用状态项而不是通过 getter。