Soy novato y estoy haciendo un proyecto de tienda en línea. Y tengo dos errores que no puedo arreglar de ninguna manera:
1) [Advertencia de Vue]: se accedió a la propiedad "$ store" durante el procesamiento, pero no está definida en la instancia.
2) TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'estado')
Tienda.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-catalogue.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>repositorio: https://github.com/BIGBASEDFLOPPA/Project1
Si quitas el "esto" funcionará
v-for="product in $store.state.products"Debe usar "esto" en el script, pero no en la plantilla.
Vue3.x, debe importar la tienda en someItem.vue en su caso, siguiendo el código:
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"