Can't access specific state property in Vuex store

My store’s state object has 3 properties: user_id, favorites, and posted_states

This is my state object:

state: {
        favorites: [],
        user_id: null,
        posted_states: []

I have an action that queries my database, and sets the user_id property to the returned value.
The problem is, in another action, when I try to access the user_id property, it always returns null. Something weird I’ve noticed is, if I try to log the actual state variable, it shows the 3 properties I mentioned, and the user_id property correctly shows the id, and is not null.

Output of console.log

Code for above screenshot

As you can see, accessing the state directly always returns null. Even weirder, if I try to access state.user_id from a different action, it returns the correct user_id and is not null.

This is the action where I get the user_id:

get_current_user_id ({commit, state, dispatch})
          .then((response) => {
              // handle success
              if ( {

This is the mutation where I set the user_id

set_user_id(state, payload) {
          state.user_id = payload

I don’t think the issue is with the mutation, or the action itself honestly. I have also tried skipping the mutation entirely and setting it directly, which did not work. I have tried using a getter instead of accessing it directly, and also tried separating my component into a parent-child where the parent dispatches the action to set the user_id and the child dispatches the action that needs the user_id, under the assumption that this would eliminate a race condition if it even exists (however, I don’t believe this is a race condition either.)

13 thoughts on “Can't access specific state property in Vuex store”

Leave a Comment