Hello, I am new to the world of web development and currently working on an online shop project. I have encountered two errors that I'm struggling to fix:
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')
This is what my Store.js file looks like:
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;And here is a snippet from my v-catalogue.vue file:
<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>You can find the full repository for this project here: https://github.com/BIGBASEDFLOPPA/Project1