why use VM?

[yylgit]

Hi, recently I read the source code of the Vuex. When I read the function of “resetStoreVM”,I see the store._vm is used by the instance of the Vue and the store.state is used the getter to get the “this._vm._data.$$state”.but all the source nowhere use the feature of the VM. absolutely we can use the plain object like this:

get state () {
  return this._state
}

function resetStoreVM (store, state, hot) {
  const oldState = store._state
      store.getters = {}
      const wrappedGetters = store._wrappedGetters
      forEachValue(wrappedGetters, (fn, key) => {
        Object.defineProperty(store.getters, key, {
          get: () => () => fn(store),
          enumerable: true
        })
      })
      store._state = state
}

[ktsn]

Because we want to use reactive system of Vue.js.
If we use plain object as the store state, it will not update rendered html automatically/getters will not be cached based on its dependencies.

[yylgit]

ok，I understand the cache of the getter used by the computed attribute of the VM.but  update rendered html automatically I think is not use the reactive of store._vm.
Because add watcher to observer is the phase of compile,and add to is own VM,not the store._VM.
I think update rendered html automatically is used the page VM. Because we map the getters and state to the computed attributes of the page VM. when the state change,the computed attributes will change and update the html.

[ktsn]

Without the inner vm, you cannot detect the dependency. That means the view cannot watch updates of state. So the rendered html will not reactive with store state.