I am facing an issue where Vue only sees the first update of an object stored in Vuex. The object is collected step by step, starting empty and then being updated through commits to the Vuex state like setUser. While I can see the new information reflected in Vue DevTools after using addInfo commit, it doesn't display on the page and remains stuck at the second state.
async fetchUser({ commit, state }) {
return new Promise(() => {
axiosInstance
.get(User(), {
headers: {
Authorization: 'Token ' + localStorage.getItem('token'),
},
})
.then((res) => {
commit('setUser', res.data);
})
.then(() => {
axiosInstance.get(UserID(state.userInfo.pk)).then((res) => {
axiosInstance.get(res.data.profile).then((res) => {
commit('addInfo', res.data);
console.log(state.userInfo);
});
});
})
.catch((err) => {
console.log(err);
});
});
}
The userInfo object is fetched and displayed on the page using:
computed: {
...mapGetters(['userInfo']),
},
created() {
this.$store.dispatch('fetchUser');
}
This is the current content displayed on the page
This is how the object actually looks like