Reading `state` and `state`'s property give different values

I have a Vuex module like this:

const defaultState = {
  // Removed because unnecessary
  providerNetworkList: ['Test', 'Test', 'Test', 'Test'],
}

// initial state
const state = {
  ...defaultState,
  // Removed because unnecessary
}

const actions = {
  // Removed because unnecessary
  trackFilters: ({ state, rootState, getters }) => {
    console.log(state, state.providerNetworkList)
  },
}

const mutations = {
  // Removed because unnecessary
  chooseProviderNetworkList: (state, providerNetworkList) =>
    Object.assign(state, { providerNetworkList }),
}

Dispatching the action trackFilters, I get the following output in the console:

​__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
  // Removed because unnecessary
providerNetworkList: Array(3) [ "Test", "Test", "Test" ]


(4) […]
​0: "Test"
​1: "Test"
​2: "Test"
​3: "Test"
​__ob__: Object { value: (4) […], dep: {…}, vmCount: 0 }
​length: 4
​<prototype>: Object { … }

Triggering another mutation updating providerNetworkList state's property:

​__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
  // Removed because unnecessary
providerNetworkList: Array(4) [ "Test", "Test", "Test", "Test" ]


(4) […]
​0: "Test"
​1: "Test"
​2: "Test"
​__ob__: Object { value: (3) […], dep: {…}, vmCount: 0 }
​length: 3
​<prototype>: Object { … }

My guess is a kind of cache in the getter method, but I don’t know how to replicate the bug, because it appear only in this vuex namespaced module.

What can be the cause of an out of sync property?

Vuex: 3.1.2
Vue: 2.6.11

I’m unclear precisely what problem you’re having but it might just be a misunderstanding about how console logging works with objects.

Console logging is live. When you expand an object by clicking in the console it will show you the current properties, not necessarily the properties that were present at the point you logged it.

To be sure you’re seeing fixed log values you need to ensure everything you log is a primitive. So logging the length should be reliable, or converting to a string using JSON.stringify.

Hi skirtle, thank you for your answer. Sorry if my post was not clear enough, I try to write it down a little better.

When I access to state.providerNetworkList I get a different value compared to the value stored in state object. When accessing to providerNetworkList I expect the same value store in state because is the same object.

  1. initial state: {"providerNetworkList":["Test","Test","Test","Test"]}
  2. trigger vuex mutation chooseProviderNetworkList (with 3 values)
  3. trigger vuex action trackFilters
    • Got state updated: {"providerNetworkList":["Test","Test","Test"]}
    • Got state.providerNetworkList not updated: ["Test","Test","Test","Test"] (should contain 3 values, like state)
  4. trigger vuex mutation chooseProviderNetworkList (with 4 values)
  5. trigger vuex action trackFilters
    • Got state updated: {"providerNetworkList":["Test","Test","Test", "Test"]}
    • Got state.providerNetworkList not updated: ["Test","Test","Test"]. It’s the value that I expect at the step 3

If I use JSON.stringify or the spread operator on { ...state } I got the wrong value again.

  1. initial state: {"providerNetworkList":["Test","Test","Test","Test"]}
  2. trigger vuex mutation chooseProviderNetworkList (with 3 values)
  3. trigger vuex action trackFilters
    • Got state not updated: {"providerNetworkList":["Test","Test","Test","Test"]} (should contain 3 values)
    • Got state.providerNetworkList not updated: ["Test","Test","Test","Test"] (should contain 3 values)
  4. trigger vuex mutation chooseProviderNetworkList (with 4 values)
  5. trigger vuex action trackFilters
    • Got state updated: {"providerNetworkList":["Test","Test","Test"]} (should contain 4 values)
    • Got state.providerNetworkList not updated: ["Test","Test","Test"] (should contain 4 values)

Maybe this explain my problem a bit better.

That all seems to tally with my point about the console logging being live. When you use JSON.stringify you consistently see the same state. It might not be the state you were expecting, but it is consistent.

As for the incorrect values, I don’t think there’s any Vue mechanism in play here. The simplest explanation is that the mutation is being called after the logging in the action. That would explain all the logged values you’ve posted so far.

Try adding some logging to the mutation to confirm exactly when it’s called and what value it’s passed. I suspect you’ll find that happens after the action logging.