0
114
VistasCómo establecer el estado de los datos api en la tienda
Estoy tratando de establecer mi estado en los datos que obtengo de mi API con un GETTER en la tienda.
durante el gancho del ciclo de vida mounted() , active el GETTER getProducts() que se ve así:
export const getters = { async getProducts() { axios.get('/api/products') .then(res => { var data = res.data commit('setProducts', data) }) .catch(err => console.log(err)); } } En el GETTER trato de activar una MUTACIÓN llamada setProducts setProducts() que se ve así:
export const mutations = { setProducts(state, data) { state.products = data } }Pero cuando ejecuto esto, aparece el error ReferenceError: la confirmación no está definida en mi consola. Entonces, obviamente, lo que sale mal es desencadenar la MUTACIÓN, pero después de buscar 2 días seguidos en Internet, todavía no pude encontrar nada.
También intenté reemplazar commit('setProducts', data) con: this.setProducts(data) setProducts(data)
Todo lo cual terminó con el error "Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'setProducts')"
2 Respuestas
Responde la pregunta0
Si su función getProduct está definida en un componente Vue, debe acceder a la tienda de esta manera: this.$store.commit('setProducts', data)
Si su función no está definida en un componente Vue sino en un archivo javascript externo, primero debe importar su tienda
import store from './fileWhereIsYourStore.js' store.commit('setProducts', data) Si la exportación de getters es literalmente la definición de los captadores de su tienda, puede usar la solución de importar la tienda primero, pero debe saber que claramente no es una buena práctica hacer confirmaciones en captadores. Debe haber una mejor solución a su problema.
EDITAR: para responder a su comentario, así es como podría hacerlo:
// Your store module export default { state: { products: [] }, mutations: { SET_PRODUCTS(state, data) { state.products = data } }, actions: { async fetchProducts(store) { await axios.get('/api/products') .then(res => { var data = res.data store.commit('SET_PRODUCTS', data) }) .catch(err => console.log(err)); } } }Ahora, puede obtener productos y llenar su tienda en cada uno de sus componentes de esta manera:
// A random Vue Component <template> </template> <script> export default { async mounted() { await this.$store.dispatch('fetchProducts') // now you can access your products like this console.log(this.$store.state.products) } } </script>No probé este código, pero debería estar bien.
0
Solo las acciones tienen commit en su contexto, como puede ver aquí .
Los captadores no tienen commit .
De lo contrario, también podría usar mapActions (también conocido como import { mapActions } from 'vuex' ), en lugar de this.$store.dispatch (solo una cuestión de estilo, no hay una diferencia real al final).
Refactorizar su código para que tenga una acción como sugirió Julien es una buena solución porque así es como debería usar Vuex.
Los captadores generalmente se usan para tener algún estado que tenga una estructura específica, como ordenados alfabéticamente o similares. Para acceder al estado común, use el estado regular o el ayudante de mapState .
