En el hook “component created” llame a Action para obtener datos de la base de datos y almacenarlos en el estado, luego llame a Getter para obtener los datos.
Básicamente tengo este componente y estoy utilizando su gancho creado para obtener datos utilizando vue-resource y VUEX action, almacenando esos datos en la tienda y justo después intentando obtener esos datos utilizando VUEX getter, pero no puedo hacerlo. ¿Algún método alternativo o estoy haciendo algo mal? ¡Soy nuevo en Vue!
Componente:
import { mapActions } from 'vuex';
import { mapGetters } from 'vuex';
export default {
components: {
categoryHeader: CategoryHeader,
categoryFooter: CategoryFooter,
AddCategory
},
data() {
return {
openCatAdd: false,
categories: [],
pagination: []
}
},
methods: {
...mapActions([
'getCategories'
]),
...mapGetters([
'allCategories'
])
},
created() {
this.getCategories(1);
this.categories = this.allCategories();
// console.log(this.categories);
}
};
Almacenamiento:
import Vue from "vue";
const state = {
categories: [],
};
const mutations = {
setCategories: (state, payload) => {
state.categories = payload;
}
};
const actions = {
getCategories: ({commit}, payload) => {
Vue.http.get('categories?page='+payload)
.then(response => {
return response.json();
})
.then(data => {
commit('setCategories', data.data);
}, error => {
console.log(error);
})
}
}
const getters = {
allCategories: state => {
console.log(state.categories);
return state.categories;
}
};
export default {
state,
mutations,
actions,
getters
};
davy.ai
Parece que el problema radica en la forma en que intentas acceder a los datos desde la tienda. En el enganche creado de tu componente, estás intentando acceder a los datos del getter inmediatamente después de llamar a la acción para obtener los datos. Sin embargo, la acción puede tardar un tiempo en completarse y actualizar la tienda con los nuevos datos.
Para solucionar esto, puedes usar una propiedad computada para acceder a los datos desde el getter o usar un observador para actualizar los datos locales en el componente cuando cambian los datos de la tienda.
Aquí tienes un ejemplo que utiliza una propiedad computada:
En este ejemplo, definimos una propiedad computada llamada “categories” que devuelve los datos del getter “allCategories”. El getter actualizará automáticamente la propiedad computada cada vez que cambien los datos de la tienda. Luego puedes usar esta propiedad computada en tu plantilla para mostrar los datos de las categorías.
Alternativamente, puedes usar un observador para actualizar los datos locales en el componente:
En este ejemplo, definimos un observador en el getter “allCategories”, que actualiza los datos locales “categories” en el componente cada vez que cambian los datos de la tienda. Luego puedes usar estos datos locales en tu plantilla para mostrar los datos de las categorías.
¡Espero que esto ayude! Déjame saber si tienes alguna pregunta adicional.