I am facing an issue with updating my vuex store after modifying my user credentials in a component. Below is the code snippet for reference:
mutations: {
updateUserState: function(state, user) {
state.user = user;
},
}
actions: {
updateUserData({ commit }, user) {
commit("updateUserState", user);
},
}
Inside the component:
updateUserData() {
//function to update data in database
UserService.updateUserData(this.firstName, this.lastName).then(res => {
if(res.code == 200) {
this.makeToast('success', res.message);
//function to fetch current user data post update
UserService.getUserData().then(res => {
console.log(res.data);
//updating my store -> NOT WORKING
this.$store.dispatch("auth/updateUserData", res.data);
})
} else {
this.makeToast('error', res.message);
}
})
}
Whenever I submit and execute the updateUserData function, my state gets updated instantaneously on the same page (where I have a navbar displaying data from this.$store.state.auth.user;). However, upon switching to another page, the old data from the state (before the update on the previous page) persists... :(
Could someone please point out what might be incorrect here? Appreciate any assistance!