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

Question

我是新手，正在制作网上商店的项目。 我有两个错误，我无法以任何方式修复：

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

2)Uncaught TypeError: Cannot read properties of undefined (reading 'state')

商店.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-目录.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

如果你把“这个”去掉它就可以了

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"

Answer 3

您可以使用

mapState

helper 来编写更清晰的代码。

首先导入它：

import { mapState } from "vuex";

在

computed

里面加上扩展运算符来 简化语法：

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

现在您可以在没有

products

的情况下使用

$store.state

：

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

Answer 4

您不需要在 Vue 3 中创建 store.js。在文件 v-catalog.vue 中，您必须编写以下代码

 <template>
  <div class = 'v-catalog'>
  <h1>Catalog</h1>
<div class ="v-catalog__list">
  <v-catalog-item
  v-for="product in products"
  :key="product.article"
  v-bind:product_data="product"
  @sendArticle="showChildArticleInConsole"
  />
</div>
  </div>
</template>
<script>
import vCatalogItem from './v-catalog-item'
import axios from "axios";
export default {
  components: {
    vCatalogItem
  },
  name: "v-catalog",
  data() {
    return {
      products: []
    }
  },
  async created() {
    try {
      const res = await axios.get(`http://localhost:3000/products`);

      this.products = res.data;
    } catch (e) {
      console.error(e);
    }
  }
}
</script>