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
If you take the "this" out it will work
v-for="product in $store.state.products"
You need to use "this" in the script, but not in the template.
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"