CODEWITHSUNDEEP
javascriptvue.js
Bjartur L
Bjartur L

Reputation: 13

Vuex store object getter returning different value when calling nested values

I'm using a Vuex store to store a user object. This is a getter for the user object

getters: {
    user: (state) => state,
    isAuthenticated: state => {
      console.log("user object", state);
      console.log("authorized", state.authorized);
      return state.authorized;
    }
},

However, when calling the getter this is what gets logged to the console.

enter image description here

As you can see the value for authorized changes whether the entire object is called or just the value itself. Any ideas?

Upvotes: 1

Views: 400

Answers (1)

Decade Moon
Decade Moon

Reputation: 34306

It's probably because the console evaluates the object only when you expand it, and by that time authorized has been set to true. When logging objects, you aren't seeing a snapshot of the object at the moment it was logged.

In Chrome dev tools, hovering over the i symbol displays this tooltip:

Screenshot

Firefox dev tools does a similar thing.

It's best to set a breakpoint and inspect the object state in the debugger.

Upvotes: 2

Related Questions