VueJs - 突变不保存新的 object 到 state

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

when i on submit launch updateUserData function my state is updated on this same page (I have a navbar with data from this.$store.state.auth.user; ) instant after this action but when i change my page then i have my old来自 state 的数据（在上一页更新之前）... :(

有人可以告诉我这里有什么问题吗？ 谢谢你的帮助！

Answer 1

您如何在导航栏组件中访问您的用户实例？ 您需要使其具有响应性以更新其值，因此最佳实践是在您的商店文件中定义一个 getter，例如在auth.js模块中：

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

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

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

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