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

Question

我是新手，正在做网店项目。我遇到了两个无法以任何方式修复的错误：

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

2)Uncaught 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 中导入商店在您的情况下，以下代码：

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"

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

[Vue warn]: Property "$store" was accessed during render but is not defined on instance

javascript

vue.js

vuex