How to update $auth.user properties in Nuxt.js?

Question

When I want to update $auth.user.balance:

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

But it returns error:

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

How can I update these vuex properties in Nuxtjs?

Radical Edward · Accepted Answer · 2022-04-14T08:43:36.690

15

Nuxt provides $auth.setUser() method to set user.

Use $auth.setUser() like so:

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

Data updating in store always should be immutable.

So create a new reference of object before passing it to setUser to avoid the reactivity issue.

edited Apr 14 '22 at 08:43

answered Aug 25 '20 at 19:51

Radical Edward

In my case, when using this.$auth.user in a computed variable it was not updating the DOM, i've needed to use this.$auth.user directly. – Jonathan Arias Mar 02 '21 at 14:26

Germano Buss Niehues · Answer 2 · 2020-08-25T18:57:21.647

When you're using Vuex you should only mutate your state throught your mutations, in your Vuex you should create a mutation like this :

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

and in your component you need to map your new mutation in your methods,

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

don't forget to import the mapMutations from vuex

import { mapMutations } from 'vuex';

and in your component when you want to set a new value to balance you call

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

You can learn more about mutations in Vuex store here in Vuex documentation

2 Answers2