VUE全家桶之vuex核心原理解析

前言

现在前端开发中vuejs是大部分前端工程师的首选，只要不是很小的项目都会引用vuex来进行状态管理。最近新开展的项目比较复杂，使用vuex的地方也比较多。在此过程中也遇到了不少问题。如今有时间正好研究下vuex框架源码，深入了解下他的底层实现。

为什么要使用vuex

在当前前端的spa模块化项目中不可避免的是某些变量需要在全局范围内引用，此时父子组件的传值，子父组件间的传值，兄弟组件间的传值成了我们需要解决的问题。虽然vue中提供了props（父传子）commit（子传父）兄弟间也可以用localstorage和sessionstorage。但是这种方式在项目开发中带来的问题比他解决的问题（难管理，难维护，代码复杂，安全性低）更多。vuex的诞生也是为了解决这些问题，从而大大提高我们vue项目的开发效率。（信不信由你=-=）我接触vue项目的这两年,虽然一直在用vuex（用的还算熟练），但是还没有深入的去了解过他的架构原理，最近正好有空，就来深入学习下。

vuex的整体架构主体

源码解析（工作原理）

1. 根state的存储位置 当你在使用vuex时有没有想过你在代码中设置的state被vuex如何处理了呢

const store = new Vuex.Store({ 
state: { count: 0 }, 
mutations: { increment (state) { 
      state.count++ 
} } })
复制代码

我们设置在跟state中的属性会被vuex存储在根元素中

 this._modules = new ModuleCollection(options)//初始化
 const state = this._modules.root.state//获取定义的state
复制代码

vuex初始化时先去获取定义在state属性中的值new ModuleCollection(options)进行模块收集（重新组装我们定义在store中的相关属性）： 最终形成一棵module树

export default class ModuleCollection {
  constructor (rawRootModule) {
    // register root module (Vuex.Store options)
    this.register([], rawRootModule, false)
  }

  get (path) {
    return path.reduce((module, key) => {
      return module.getChild(key)
    }, this.root)
  }

  getNamespace (path) {
    let module = this.root
    return path.reduce((namespace, key) => {
      module = module.getChild(key)
      return namespace + (module.namespaced ? key + '/' : '')
    }, '')
  }

  update (rawRootModule) {
    update([], this.root, rawRootModule)
  }

  register (path, rawModule, runtime = true) {
    if (process.env.NODE_ENV !== 'production') {
      assertRawModule(path, rawModule)
    }

    const newModule = new Module(rawModule, runtime)
    if (path.length === 0) {
      this.root = newModule
    } else {
      const parent = this.get(path.slice(0, -1))
      parent.addChild(path[path.length - 1], newModule)
    }

    // register nested modules
    if (rawModule.modules) {
      forEachValue(rawModule.modules, (rawChildModule, key) => {
        this.register(path.concat(key), rawChildModule, runtime)
      })
    }
  }

  unregister (path) {
    const parent = this.get(path.slice(0, -1))
    const key = path[path.length - 1]
    if (!parent.getChild(key).runtime) return

    parent.removeChild(key)
  }
}
复制代码

2. commit(=>mutations)时做了什么

const { dispatch, commit } = this //初始化先绑定commit

this.commit = function boundCommit(type, payload, options) {
      return commit.call(store, type, payload, options)
    }
复制代码

   绑定之后注册mutation（commit的属性） 
复制代码

function registerMutation(store, type, handler, local) {
  const entry = store._mutations[type] || (store._mutations[type] = [])
  entry.push(function wrappedMutationHandler(payload) {
    handler.call(store, local.state, payload)
  })
}
复制代码

  commit(_type, _payload, _options) {
    console.log('================commit=====================')
    console.log(_type)
    console.log(_payload)
    console.log(_options)
    // check object-style commit
    const {
      type,
      payload,
      options
    } = unifyObjectStyle(_type, _payload, _options)

    const mutation = {
      type,
      payload
    }
    //这是一个函数数组
    const entry = this._mutations[type]
    //判断当前设置的属性的值是否存在
    if (!entry) {
      if (process.env.NODE_ENV !== 'production') {
        console.error(`[vuex] unknown mutation type: ${type}`)
      }
      return
    }
    //在执行mutation的时候，会将_committing设置为true，执行完毕后重置，在开启strict模式时，会监听state的变化，当变化时_committing不为true时会给出警告
    this._withCommit(() => {
      //迭代传入的commit数组
      entry.forEach(function commitIterator(handler) {
        handler(payload)
      })
    })
    this._subscribers.forEach(sub => sub(mutation, this.state))
    //当开发环境是抛出警告（如果commit的属性不存在）
    if (
      process.env.NODE_ENV !== 'production' &&
      options && options.silent
    ) {
      console.warn(
        `[vuex] mutation type: ${type}. Silent option has been removed. ` +
        'Use the filter functionality in the vue-devtools'
      )
    }
  }
复制代码

3.dispatch（=>actions）做了啥（初始化同commit）

   //dispatch定义位置
    this.dispatch = function boundDispatch(type, payload) {
      return dispatch.call(store, type, payload)
    }
复制代码

绑定dispatch

function registerAction(store, type, handler, local) {
  const entry = store._actions[type] || (store._actions[type] = [])
  entry.push(function wrappedActionHandler(payload, cb) {
    let res = handler.call(store, {
      dispatch: local.dispatch,
      commit: local.commit,
      getters: local.getters,
      state: local.state,
      rootGetters: store.getters,
      rootState: store.state
    }, payload, cb)
    //将res函数转为异步 promise
    if (!isPromise(res)) {
      res = Promise.resolve(res)
    }
    if (store._devtoolHook) {
      return res.catch(err => {
        store._devtoolHook.emit('vuex:error', err)
        throw err
      })
    } else {
      return res
    }
  })
}
复制代码

注册actions

  dispatch(_type, _payload) {
    // check object-style dispatch
    const {
      type,
      payload
    } = unifyObjectStyle(_type, _payload)

    const action = {
      type,
      payload
    }
    const entry = this._actions[type]
    if (!entry) {
      if (process.env.NODE_ENV !== 'production') {
        console.error(`[vuex] unknown action type: ${type}`)
      }
      return
    }

    try {
      this._actionSubscribers
        .filter(sub => sub.before)
        .forEach(sub => sub.before(action, this.state))
    } catch (e) {
      if (process.env.NODE_ENV !== 'production') {
        console.warn(`[vuex] error in before action subscribers: `)
        console.error(e)
      }
    }

    const result = entry.length > 1 ?
      Promise.all(entry.map(handler => handler(payload))) :
      entry[0](payload)

    return result.then(res => {
      try {
        this._actionSubscribers
          .filter(sub => sub.after)
          .forEach(sub => sub.after(action, this.state))
      } catch (e) {
        if (process.env.NODE_ENV !== 'production') {
          console.warn(`[vuex] error in after action subscribers: `)
          console.error(e)
        }
      }
      return res
    })
  }
复制代码

其他

vuex和全局变量的区别：(借用博客)

1，【响应式】vuex的状态存储是响应式的，当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效更新。

2，【不能直接改变store】不能直接改变store的变化，改变store中状态的唯一途径是commit mutation。方便于跟踪每一个状态的变化。

转载于:https://juejin.im/post/5c7356e9e51d457fd52f10f3