Question

[Vue 警告]：属性“$store”在渲染期间被访问，但未在实例上定义

2022-03-28

4910

javascript vue.js vuex

我是新手，正在做网上商店的项目。我遇到了两个无法修复的错误：

1)[Vue 警告]：属性“$store”在渲染期间被访问，但未在实例上定义。

2)未捕获的 TypeError：无法读取未定义的属性（读取“state”）

Store.js

import { createStore } from 'vuex'
import axios from "axios";

 const store = createStore({
    state:{
        products:[]
    },
    mutations:{
        SET_PRODUCTS_TO_STATE:(state,products)=>{
            state.products = products;
        }
    },
    actions:{
        GET_PRODUCTS_FROM_API({commit}) {
            return axios('http://localhost:3000/products',{
                method:"GET"
            })
                .then((products) =>{
                commit('SET_PRODUCTS_TO_STATE',products.data);
                return products;
            })
                .catch((error)=>{
                    console.log(error)
                    return error;
                })
        }
    },
    getters:{
        PRODUCTS(state){
            return state.products;
        }
    }

});
export default store;

v-cataloge.vue

<template>
  <div class = 'v-catalog'>
  <h1>Catalog</h1>
<div class ="v-catalog__list">
  <v-catalog-item
  v-for="product in this.$store.state.products"
  :key="product.article"
  v-bind:product_data="product"
  @sendArticle="showChildArticleInConsole"
  />
</div>
  </div>
</template>

存储库： https://github.com/BIGBASEDFLOPPA/Project1

Answer 1

如果将“this”取出，它将会起作用

v-for="product in $store.state.products"

您需要在脚本中使用“this”，但不要在模板中使用。

Answer 2

Vue3.x，您应该在 someItem.vue 中导入 store 在您的例子中，代码如下：

import { useStore } from 'vuex';
export default {
  setup(){
    let store = useStore()
    let products = store.state.products

    return {
      products
    }
  }
}

// use products in template
v-for="product in products"

Answer 3

您可以使用 mapState 帮助程序来编写更简洁的代码。

首先导入它：

import { mapState } from "vuex";

使用扩展运算符将其添加到 computed 中以简化语法：

computed: {
   ...mapState(['products']),
},

现在您可以在没有 $store.state 的情况下使用 products ：

<v-catalog-item v-for="product in products" ...