VueJs -突变不保存新对象到状态

Question

在一个组件中更新我的用户凭据后，我有一个更新我的vuex存储的问题，以下是我的代码:

mutations: {
updateUserState: function(state, user) {
state.user = user;
},
}
actions: {
updateUserData({ commit }, user) {
commit("updateUserState", user);
},
}

在组件:

updateUserData() {
//function to update data in db
UserService.updateUserData(this.firstName, this.lastName).then(res => {
if(res.code == 200) {
this.makeToast('success', res.message);
//function to get current user data after update
UserService.getUserData().then(res => {
console.log(res.data);
//update my store -> NOT WORK
this.$store.dispatch("auth/updateUserData", res.data);
})
} else {
this.makeToast('error', res.message);
}
})
}

当我提交启动updateUserData功能时，我的状态在同一页面上更新(我有一个导航栏，数据来自this.$store.state.auth.user;)在此操作后立即更新，但当我更改页面时，我有我的旧数据从状态(在上一页更新之前)…(

谁能告诉我这里出了什么问题?谢谢你的帮助!

Answer 1

如何访问导航栏组件中的用户实例?你需要使它反应，以便更新它的值，所以最好的做法是在你的商店文件中定义一个getter，例如在auth.js模块:

getters: {
user(state) {
return state.user;
},
}

并将其放入导航栏组件的computed属性中，像这样:

<script>
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters(['auth/user'])
}
}
</script>