【问题标题】: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 属性?

【问题讨论】:

    标签: vue.js vuex nuxt.js nuxtjs


    【解决方案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 之前创建一个新的对象引用以避免反应性问题。

      【讨论】:

      • 就我而言,当在计算变量中使用 this.$auth.user 时,它并没有更新 DOM,我需要直接使用 this.$auth.user。
      猜你喜欢
      • 1970-01-01
      • 2020-06-06
      • 1970-01-01
      • 2014-09-21
      • 2021-10-10
      • 2018-04-13
      • 1970-01-01
      • 2021-01-22
      • 2017-01-20
      相关资源
      最近更新 更多