I am facing an issue with my Vue.js application where I have an array called items bound to a Vuex data store and exposed as a computed property using the mapGetters helper. In the created() hook of the component, I make a REST API call to update this array. The Vuex action used for this task returns a promise that accesses the API and updates the items array before resolving. However, when I try to access items after the promise resolves, it is empty even though it should be populated by the API response. What could be causing this unexpected behavior?
Here are the relevant parts of the code:
Component:
computed: {
...mapGetters({
items: 'allHistoryItems'
}),
// ...
created () {
this.$store.dispatch('fetchList').then(console.log(this.items))
}
Action:
fetchList: ({ commit }) => {
return new Promise((resolve, reject) => {
fetchList().then(response => {
commit(types.FETCH_LIST, response.data)
resolve(response)
})
})
}
Although the API response can be accessed from the component, the items array remains empty. Could it be that reactivity does not occur until after the promise has resolved?