Cómo establecer el estado de los datos de la API en el almacén
Estoy tratando de establecer mi estado con los datos que obtengo de mi API utilizando un GETTER en el store.
Durante el ciclo de vida de “mounted()”, activo 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, intento activar una MUTACIÓN llamada “setProducts()” que se ve así:
export const mutations = {
setProducts(state, data) {
state.products = data
}
}
Pero cuando ejecuto esto, obtengo el error “ReferenceError: commit is not defined” en mi consola. Entonces, obviamente, lo que sale mal es activar la MUTACIÓN. Después de buscar en internet durante 2 días seguidos, aún no pude encontrar nada.
También intenté reemplazar “commit(‘setProducts’, data)” con:
this.setProducts(data)
setProducts(data)
Lo cual terminó con el error “TypeError: Cannot read properties of undefined (reading ‘setProducts’)”
davy.ai
Estableciendo el estado utilizando datos de la API mediante un getter y una mutación
Si te encuentras con el error ReferenceError: commit no está definido, significa que estás intentando utilizar
commit
dentro de un getter, lo cual no es posible. Los getters son funciones síncronas que devuelven valores calculados a partir del estado del almacenamiento. Las mutaciones son la única forma de cambiar el estado de tu almacenamiento Vuex.Para solucionar esto, necesitas cambiar
getProducts()
para que devuelva los datos de la API y luego llamar a una mutación desde tu componente para actualizar el estado. Aquí tienes un ejemplo:En tu almacén:
En tu componente:
De esta manera, estás despachando una acción desde tu componente para obtener los datos de la API, luego llamas a la mutación
setProducts
para actualizar el estado. Finalmente, puedes utilizar el gettergetProducts
en tu componente para obtener los datos del estado.¡Espero que esto te ayude! Avísame si tienes alguna otra pregunta.