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

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

阅读 3.4k
2 个回答

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.`)
    }
  }
 }

看了上一个回答的评论,其实在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 源码整体架构,打造属于自己的状态管理库这个阅读链接可能阅读体验更好些

推荐问题
宣传栏