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

Question

Im newbie and making project of online-shop. And i got two errors which I can't fix in any way:

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

2)Uncaught TypeError: Cannot read properties of undefined (reading '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>

repository:https://github.com/BIGBASEDFLOPPA/Project1

Answer 1

Vue3.x, you should import store in someItem.vue in your case, following code:

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"