如何更新 Nuxt.js 中的 $auth.user 屬性？

Question

當我想更新$auth.user.balance ：

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

但它返回錯誤：

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

如何在 Nuxtjs 中更新這些 vuex 屬性？

Answer 1

Nuxt 提供了$auth.setUser()方法來設置用戶。

像這樣使用$auth.setUser() ：

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

存儲中的數據更新始終應該是不可變的。

因此，在將對象傳遞給setUser之前創建一個新的對象引用以避免反應性問題。

Answer 2

當你使用 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文檔中