Как обновить свойства $ auth.user в Nuxt.js?

Question

Когда я хочу обновить $auth.user.balance:

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

Но возвращает ошибку:

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

Как я могу обновить эти свойства vuex в Nuxtjs?

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']),

не забудьте импортировать mapMutations из vuex

import { mapMutations } from 'vuex';

и в вашем компоненте, когда вы хотите установить новое значение для баланса, вы вызываете

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

Вы можете узнать больше о мутациях в магазине Vuex здесь, в документации Vuex.