vuex中store中的state是如何定义出来的？

Question

各位大佬们，之前也没看到Object.defineProperty(store, 'state')这个操作，想问下new Store以后，改方法第一行中this为什么会出现state这个字段？

Answer 1

vuex源码中使用了es6中class的get和set定义state

 get state () {
    return this._vm._data.$state
  }

  set state (v) {
    if (process.env.NODE_ENV !== 'production') {
      assert(false, `use store.replaceState() to explicit replace store state.`)
    }
  }

你的代码应该是经过es6转es5了吧，转出来应该是下面的代码

Store.prototype = {
  get state () {
    return this._vm._data.$state
  }

  set state (v) {
    if (process.env.NODE_ENV !== 'production') {
      assert(false, `use store.replaceState() to explicit replace store state.`)
    }
  }
 }

Answer 2

看了上一个回答的评论，其实在installModule函数里，有一块代码是注册state的。

class Store{
    constructor (options = {}) {
        // init root module.
        // this also recursively registers all sub-modules
        // and collects all module getters inside this._wrappedGetters
        installModule(this, state, [], this._modules.root)
    }

}

function installModule(){
    // ... 省略代码
    // set state
    // 不是根模块且不是热重载
    if (!isRoot && !hot) {
      // 获取父级的state
      const parentState = getNestedState(rootState, path.slice(0, -1))
      // 模块名称
      // 比如 cart
      const moduleName = path[path.length - 1]
      // state 注册
      store._withCommit(() => {
        // 省略代码：非生产环境 报错 模块 state 重复设置
        Vue.set(parentState, moduleName, module.state)
      })
    }
    // ... 省略代码
}

刚好之前写过一篇vuex源码解析的文章，你可以看看，并且断点调试一下，你就能解答你自己的这个问题了。
思否：学习 vuex 源码整体架构，打造属于自己的状态管理库
个人博客：学习 vuex 源码整体架构，打造属于自己的状态管理库这个阅读链接可能阅读体验更好些