Nuxt.js에서 $auth.user 속성을 업데이트하는 방법?

Nuxt.js에서 $auth.user 속성을 업데이트하는 방법?

업데이트하려는 경우$auth.user.balance:

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

그러나 다음과 같은 오류를 반환한다.

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

Nuxtjs에서 이러한 vuex 속성을 업데이트하려면 어떻게 해야 하는가?

Nuxt 제공$auth.setUser()사용자 설정 방법.

사용하다$auth.setUser()다음과 같다:

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

저장소의 데이터 업데이트는 항상 불변해야 한다.

따라서 객체를 전달하기 전에 객체의 새 참조를 생성하십시오.setUser반응성 문제를 피하기 위해.

Vuex를 사용할 때는 오직 당신의 돌연변이를 통해서만 당신의 상태를 변이해야 하며, 당신의 Vuex에서는 다음과 같은 돌연변이를 생성해야 한다.

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

그리고 당신의 구성 요소에서 당신은 당신의 새로운 돌연변이를methods,

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

vuex에서 mapMutions를 가져오는 것을 잊지 마십시오.

import { mapMutations } from 'vuex';

구성 요소에서 새 값을 설정하여 밸런스를 조정하려는 경우

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

Vuex 저장소의 돌연변이에 대한 자세한 내용은 Vuex 설명서를 참조하십시오.

참조URL: https://stackoverflow.com/questions/63585172/how-to-update-auth-user-properties-in-nuxt-js