如何更新 Nuxt.js 中的 $auth.user 属性？答案

【问题标题】：How to update $auth.user properties in Nuxt.js?如何更新 Nuxt.js 中的 $auth.user 属性？
【发布时间】：2020-12-14 12:26:25
【问题描述】：

当我要更新$auth.user.balance时：

methods:{
   test(){
      this.$auth.user.balance = 10;
   }
}

但它返回错误：

Error: [vuex] do not mutate vuex store state outside mutation handlers.

如何在 Nuxtjs 中更新这些 vuex 属性？

【问题讨论】：

【解决方案1】：

当你使用 Vuex 时，你应该只通过你的突变来改变你的状态，在你的 Vuex 中你应该创建一个像这样的突变：

  setBalance(state, payload) {
    auth.user.balance = payload;
  },

在您的组件中，您需要将您的新突变映射到您的methods，

 ...mapMutations('auth', ['setBalance']),

别忘了从 vuex 导入 mapMutations

import { mapMutations } from 'vuex';

当你想在你的组件中设置一个新值来平衡你调用时

 test(){
         let newValue = 10;
         this.setBalance(newValue);
       }

您可以在 Vuex 文档中了解有关 Vuex 商店 here 中的突变的更多信息

【讨论】：

【解决方案2】：

Nuxt 提供$auth.setUser() 方法设置用户。

像这样使用$auth.setUser()：

const updatedUser = {...this.$auth.user}
updatedUser.balance = 10;
this.$auth.setUser(updatedUser)

存储中的数据更新始终应该是不可变的。

所以在将它传递给setUser 之前创建一个新的对象引用以避免反应性问题。

【讨论】：