当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 详解vuex之store源码简单解析

详解vuex之store源码简单解析

2019年07月18日  | 移动技术网IT编程  | 我要评论

武冈市人事局,天地传奇主题曲,申请163邮箱

关于vuex的基础部分学习于

使用vuex的时候，通常会实例化store类，然后传入一个对象，包括我们定义好的actions、getters、mutations、state等。store的构造函数：

export class store {
 constructor (options = {}) {
  // 若window内不存在vue，则重新定义vue
  if (!vue && typeof window !== 'undefined' && window.vue) {
   install(window.vue)
  }

  if (process.env.node_env !== 'production') {
   // 断言函数，来判断是否满足一些条件
   // 确保 vue 的存在
   assert(vue, `must call vue.use(vuex) before creating a store instance.`)
   // 确保 promsie 可以使用
   assert(typeof promise !== 'undefined', `vuex requires a promise polyfill in this browser.`)
   assert(this instanceof store, `store must be called with the new operator.`)
  }

  // 解构赋值，拿到options里的plugins和strict
  const {
   plugins = [],
   strict = false
  } = options

  // 创建内部属性
  // 标志一个提交状态，作用是保证对 vuex 中 state 的修改只能在 mutation 的回调函数中，而不能在外部随意修改 state
  this._committing = false 
  // 用来存储用户定义的所有的actions
  this._actions = object.create(null)
  this._actionsubscribers = []
  // 用来存储用户定义所有的mutatins
  this._mutations = object.create(null)
  // 用来存储用户定义的所有getters 
  this._wrappedgetters = object.create(null)
  // 用来存储所有的运行时的 modules
  this._modules = new modulecollection(options)
  this._modulesnamespacemap = object.create(null)
  // 用来存储所有对 mutation 变化的订阅者
  this._subscribers = []
  // 一个 vue对象的实例，主要是利用 vue 实例方法 $watch 来观测变化的
  this._watchervm = new vue()

  // 把store类的dispatch和commit的方法的this指针指向当前store的实例上
  const store = this
  const { dispatch, commit } = this
  this.dispatch = function bounddispatch (type, payload) {
   return dispatch.call(store, type, payload)
  }
  this.commit = function boundcommit (type, payload, options) {
   return commit.call(store, type, payload, options)
  }

  // 是否开启严格模式
  this.strict = strict

  const state = this._modules.root.state

  // vuex的初始化的核心，其中，installmodule方法是把我们通过options传入的各种属性模块注册和安装；
  // resetstorevm 方法是初始化 store._vm，观测 state 和 getters 的变化；最后是应用传入的插件。
  installmodule(this, state, [], this._modules.root)

  resetstorevm(this, state)
  plugins.foreach(plugin => plugin(this))

  const usedevtools = options.devtools !== undefined ? options.devtools : vue.config.devtools
  if (usedevtools) {
   devtoolplugin(this)
  }
 }

vuex本身是单一状态树，应用的所有状态都包含在一个大对象内，随着我们应用规模的不断增长，这个store变得非常臃肿。为了解决这个问题，vuex允许我们把store分模块。每一个模块包含各自的state、mutations、actions和getters，甚至还可以嵌套模块。

接下来看installmodule方法：

function installmodule (store, rootstate, path, module, hot) {
 // 通过path数组的长度判断是否为根
 const isroot = !path.length
 const namespace = store._modules.getnamespace(path)

 // register in namespace map
 if (module.namespaced) {
  store._modulesnamespacemap[namespace] = module
 }

 // 第一次调用时，path为空，不进入if
 // 递归调用installmodule安装子模块时，将执行该代码块
 if (!isroot && !hot) {
  const parentstate = getnestedstate(rootstate, path.slice(0, -1))
  // 模块名
  const modulename = path[path.length - 1]
  // 把当前模块的state添加到parentstate中。具体解析见下
  store._withcommit(() => {
   vue.set(parentstate, modulename, module.state)
  })
 }

 const local = module.context = makelocalcontext(store, namespace, path)

 // 对mutations、actions、getters进行注册
 module.foreachmutation((mutation, key) => {
  const namespacedtype = namespace + key
  registermutation(store, namespacedtype, mutation, local)
 })

 module.foreachaction((action, key) => {
  const type = action.root ? key : namespace + key
  const handler = action.handler || action
  registeraction(store, type, handler, local)
 })

 module.foreachgetter((getter, key) => {
  const namespacedtype = namespace + key
  registergetter(store, namespacedtype, getter, local)
 })

 // 遍历modules，递归调用installmodule安装子模块
 module.foreachchild((child, key) => {
  installmodule(store, rootstate, path.concat(key), child, hot)
 })
}
store的_withcommit方法定义是这样的:

 _withcommit (fn) {
  const committing = this._committing
  this._committing = true
  fn()
  this._committing = committing
 }

vuex中所有对state的修改都会用_withcommit函数包装，保证在同步修改state的过程中this._committing的值始终为true。这样当我们观测 state的变化时，如果this._committing的值不为true，则能检查到这个状态修改是有问题的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网