I recently encountered an issue while trying to store my water data in Vuex. I followed the implementation below, but when I attempted to access my data array, it did not show up as expected.
const store = new Vuex.Store({
state: {
categories: {}
},
getters: {
categories: (state) => {
console.log(state.categories);
return state.categories;
}
},
mutations: {
set_categories: (state, data) => {
state.categories = data
}
},
actions: {
get_categories: (context) => {
axios.get(`${baseUrl}/api/categories?pagination=0`)
.then((response) => {
context.commit('set_categories', response.data);
});
}
}
});
The code snippet above is how I incorporated everything into the component and accessed it.
mounted() {
this.$store.dispatch('get_categories');
},
computed: {
stateCategories() {
return this.$store.state.categories
}
},
console.log(this.stateCategories)
Surprisingly, despite confirming through Vue developer tools that my data exists in Vuex, I still cannot see it being displayed. Can anyone identify what might be causing this issue?