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;
    },
}

并将其放入导航栏组件的计算属性中，如下所示：

<script>
    import { mapGetters } from 'vuex';

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