Vuex store object getter returning different value when calling nested values

Question

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.

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

Decade Moon · Accepted Answer · 2020-10-12 09:39:26Z

2

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:

Firefox dev tools does a similar thing.

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

answered Oct 12, 2020 at 9:39

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gynteniuxas Over a year ago

I think breakpoint is not even needed here if one is using Vue Dev Tools. Just clicking on different commits would display what has been changed :)

Decade Moon Over a year ago

@GytisTG But that doesn't help in this situation where OP wants to inspect the state at the execution of a specific line of code.

Collectives™ on Stack Overflow

Vuex store object getter returning different value when calling nested values

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related