这几天忙啊，有绝地求生要上分，好汉同盟新赛季须要上分，就懒着什么也没写，很忸捏。这个vuex,vue-router,vue的源码我半个月前就看的差不多了，然则懒，哈哈。
下面是vuex的源码剖析
在剖析源码的时刻我们可以写几个例子来举行相识，肯定不要闭门造车，多写几个例子，也就邃晓了
在vuex源码中挑选了example/counter这个文件作为例子来举行明白
counter/store.js是vuex的中心文件，这个例子比较简朴，假如比较复杂我们可以采用分模块来让代码组织越发清晰，如何分模块请在vuex的官网中看如何运用。
我们来看看store.js的代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 0
}

const mutations = {
  increment (state) {
    state.count++
  },
  decrement (state) {
    state.count--
  }
}

const actions = {
  increment: ({ commit }) => commit('increment'),
  decrement: ({ commit }) => commit('decrement'),
  incrementIfOdd ({ commit, state }) {
    if ((state.count + 1) % 2 === 0) {
      commit('increment')
    }
  },
  incrementAsync ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('increment')
        resolve()
      }, 1000)
    })
  }
}

const getters = {
  evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

actions,

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

在代码中我们实例化了Vuex.Store，每一个 Vuex 运用的中心就是 store（堆栈）。“store”基本上就是一个容器，它包含着你的运用中大部份的状况 。在源码中我们来看看Store是如何的一个组织函数(由于代码太多，我把一些推断举行省略，让人人看的更清晰)

Stor组织函数

src/store.js

export class Store {
  constructor (options = {}) {
    if (!Vue && typeof window !== 'undefined' && window.Vue) {
      install(window.Vue)
    }

    const {
      plugins = [],
      strict = false
    } = options

    // store internal state
    this._committing = false
    this._actions = Object.create(null)
    this._actionSubscribers = []
    this._mutations = Object.create(null)
    this._wrappedGetters = Object.create(null)
    this._modules = new ModuleCollection(options)
    this._modulesNamespaceMap = Object.create(null)
    this._subscribers = []
    this._watcherVM = new Vue()

    // bind commit and dispatch to self
    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)
    }

    // strict mode
    this.strict = strict

    const state = this._modules.root.state

    installModule(this, state, [], this._modules.root)

    resetStoreVM(this, state)

    plugins.forEach(plugin => plugin(this))

    if (Vue.config.devtools) {
      devtoolPlugin(this)
    }
  }

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

  commit (_type, _payload, _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
    }
    this._withCommit(() => {
      entry.forEach(function commitIterator (handler) {
        handler(payload)
      })
    })
    this._subscribers.forEach(sub => sub(mutation, this.state))

    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'
      )
    }
  }

  dispatch (_type, _payload) {
    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
    }

    this._actionSubscribers.forEach(sub => sub(action, this.state))

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

  subscribe (fn) {
    return genericSubscribe(fn, this._subscribers)
  }

  subscribeAction (fn) {
    return genericSubscribe(fn, this._actionSubscribers)
  }

  watch (getter, cb, options) {
    if (process.env.NODE_ENV !== 'production') {
      assert(typeof getter === 'function', `store.watch only accepts a function.`)
    }
    return this._watcherVM.$watch(() => getter(this.state, this.getters), cb, options)
  }

  replaceState (state) {
    this._withCommit(() => {
      this._vm._data.$$state = state
    })
  }

  registerModule (path, rawModule, options = {}) {
    if (typeof path === 'string') path = [path]

    if (process.env.NODE_ENV !== 'production') {
          assert(Array.isArray(path), `module path must be a string or an Array.`)
          assert(path.length > 0, 'cannot register the root module by using registerModule.')
      }

    this._modules.register(path, rawModule)
    installModule(this, this.state, path, this._modules.get(path), options.preserveState)
    resetStoreVM(this, this.state)
  }

  hotUpdate (newOptions) {
    this._modules.update(newOptions)
    resetStore(this, true)
  }

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

起首推断window.Vue是不是存在，假如不存在就装置Vue, 然后初始化定义，plugins示意运用的插件，strict示意是不是为严厉形式。然后对store
的一系列属性举行初始化，来看看这些属性离别代表的是什么

• _committing 示意一个提交状况，在Store中可以转变状况只能是mutations,不能在外部随便转变状况
• _actions用来网络一切action,在store的运用中经常会涉及到的action
• _actionSubscribers用来存储一切对 action 变化的定阅者
• _mutations用来网络一切action,在store的运用中经常会涉及到的mutation
• _wappedGetters用来网络一切action,在store的运用中经常会涉及到的getters
• _modules 用来网络module,当运用足够大的状况，store就会变得迥殊痴肥，所以才有了module。每一个Module都是零丁的store,都有getter、action、mutation
• _subscribers 用来存储一切对 mutation 变化的定阅者
• _watcherVM 一个Vue的实例，重如果为了运用Vue的watch要领，观察数据的变化

背面猎取dispatch和commit然后将this.dipatch和commit举行绑定，我们来看看

commit和dispatch

commit (_type, _payload, _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
    }
    this._withCommit(() => {
      entry.forEach(function commitIterator (handler) {
        handler(payload)
      })
    })
    this._subscribers.forEach(sub => sub(mutation, this.state))
  }

commit有三个参数，_type示意mutation的范例，_playload示意分外的参数，options示意一些设置。unifyObjectStyle()这个函数就不列出来了，它的作用就是推断传入的_type是不是是对象，假如是对象举行响应简朴的调解。然后就是依据type来猎取响应的mutation,假如不存在就报错，假如有就挪用this._witchCommit。下面是_withCommit的详细完成

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

函数中屡次提到了_committing，这个的作用我们在初始化Store的时刻已提到了变动状况只能经由过程mutatiton举行变动，其他体式格局都不可，经由过程检测committing的值我们就可以查看在变动状况的时刻是不是发作毛病
继承来看commit函数，this._withCommitting对猎取到的mutation举行提交，然后遍历this._subscribers,挪用回调函数，而且将state传入。团体来讲commit函数的作用就是提交Mutation,遍历_subscribers挪用回调函数
下面是dispatch的代码

dispatch (_type, _payload) {

    const action = { type, payload }
    const entry = this._actions[type]

    this._actionSubscribers.forEach(sub => sub(action, this.state))

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

和commit函数相似，起首猎取type对象的actions，然后遍历action定阅者举行回调，对actions的长度举行推断，当actions只要一个的时刻举即将payload传入，不然遍历传入参数，返回一个Promise.
commit和dispatch函数谈完，我们回到store.js中的Store组织函数
this.strict示意是不是开启严厉形式，严厉形式下我们可以观察到state的变化状况，线上环境记得封闭严厉形式。
this._modules.root.state就是猎取根模块的状况，然后挪用installModule(),下面是

installModule()

function installModule (store, rootState, path, module, hot) {
  const isRoot = !path.length
  const namespace = store._modules.getNamespace(path)

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

  // set state
  if (!isRoot && !hot) {
    const parentState = getNestedState(rootState, path.slice(0, -1))
    const moduleName = path[path.length - 1]
    store._withCommit(() => {
      Vue.set(parentState, moduleName, module.state)
    })
  }

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

  module.forEachMutation((mutation, key) => {
    const namespacedType = namespace + key
    registerMutation(store, namespacedType, mutation, local)
  })

  module.forEachChild((child, key) => {
    installModule(store, rootState, path.concat(key), child, hot)
  })
}

installModule()包含5个参数store示意当前store实例，rootState示意根组件状况，path示意组件途径数组，module示意当前装置的模块，hot 当动态转变 modules 或许热更新的时刻为 true
起首进经由过程盘算组件途径长度推断是不是是根组件，然后猎取对应的定名空间，假如当前模块存在namepaced那末就在store上增加模块
假如不是根组件和hot为false的状况，那末先经由过程getNestedState找到rootState的父组件的state,由于path示意组件途径数组，那末末了一个元素就是该组件的途径，末了经由过程_withComment()函数提交Mutation，

Vue.set(parentState, moduleName, module.state)

这是Vue的部份，就是在parentState增加属性moduleName，而且值为module.state

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

这段代码里边有一个函数makeLocalContext

makeLocalContext()

function makeLocalContext (store, namespace, path) {
  const noNamespace = namespace === ''

  const local = {
    dispatch: noNamespace ? store.dispatch : ...
    commit: noNamespace ? store.commit : ...
  }

  Object.defineProperties(local, {
    getters: {
      get: noNamespace
        ? () => store.getters
        : () => makeLocalGetters(store, namespace)
    },
    state: {
      get: () => getNestedState(store.state, path)
    }
  })

  return local
}

传入的三个参数store, namspace, path,store示意Vuex.Store的实例,namspace示意定名空间，path组件途径。团体的意义就是本地化dispatch,commit,getter和state,意义就是新建一个对象上面有dispatch，commit，getter 和 state要领
那末installModule的那段代码就是绑定要领在module.context和local上。继承看背面的起首遍历module的mutation，经由过程mutation 和 key 起首猎取namespacedType,然后挪用registerMutation()要领，我们来看看

registerMutation()

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

是不是是觉得这个函数有些熟习，store示意当前Store实例，type示意范例，handler示意mutation实行的回调函数，local示意本地化后的一个变量。在最最先的时刻我们就用到了这些东西，比方

const mutations = {
  increment (state) {
    state.count++
  }
  ...

起首猎取type对应的mutation,然后向mutations数组push进去包装后的hander函数。

module.forEachChild((child, key) => {
    installModule(store, rootState, path.concat(key), child, hot)
  })

遍历module，对module的每一个子模块都挪用installModule()要领

讲完installModule()要领，我们继承往下看resetStoreVM()函数

resetStoreVM()

function resetStoreVM (store, state, hot) {
  const oldVm = store._vm
  store.getters = {}
  const wrappedGetters = store._wrappedGetters
  const computed = {}
  forEachValue(wrappedGetters, (fn, key) => {
    computed[key] = () => fn(store)
    Object.defineProperty(store.getters, key, {
      get: () => store._vm[key],
      enumerable: true // for local getters
    })
  })

  const silent = Vue.config.silent
  Vue.config.silent = true
  store._vm = new Vue({
    data: {
      $$state: state
    },
    computed
  })
  Vue.config.silent = silent

  if (oldVm) {
    if (hot) {
     store._withCommit(() => {
        oldVm._data.$$state = null
      })
    }
    Vue.nextTick(() => oldVm.$destroy())
  }
}

resetStoreVM这个要领重如果重置一个私有的 _vm对象，它是一个 Vue 的实例。传入的有store示意当前Store实例，state示意状况，hot就不必再说了。对store.getters举行初始化，猎取store._wrappedGetters而且用盘算属性的要领存储了store.getters,所以store.getters是Vue的盘算属性。运用defineProperty要领给store.getters增加属性，当我们运用store.getters[key]现实上猎取的是store._vm[key]。然后用一个Vue的实例data来存储state 树，这里运用slient=true，是为了作废提示和正告，在这里将一下slient的作用，silent示意寂静形式（网上找的定义），就是假如开启就没有提示和正告。背面的代码示意假如oldVm存在而且hot为true时，经由过程_witchCommit修正$$state的值，而且摧毁oldVm对象

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

由于我们将state信息挂载到_vm这个Vue实例对象上，所以在猎取state的时刻，现实接见的是this._vm._data.$$state。

 watch (getter, cb, options) {
    return this._watcherVM.$watch(() => getter(this.state, this.getters), cb, options)
  }

在wacher函数中，我们先前提到的this._watcherVM就起到了作用，在这里我们利用了this._watcherVM中$watch要领举行了数据的检测。watch 作用是响应式的监测一个 getter 要领的返回值，当值转变时挪用回调。getter必需是一个函数，假如返回的值发作了变化，那末就挪用cb回调函数。
我们继承来将

registerModule()

registerModule (path, rawModule, options = {}) {
    if (typeof path === 'string') path = [path]

    this._modules.register(path, rawModule)
    installModule(this, this.state, path, this._modules.get(path), options.preserveState)
    resetStoreVM(this, this.state)
  }

没什么难度就是，注册一个动态模块，起首推断path，将其转换为数组，register()函数的作用就是初始化一个模块，装置模块，重置Store._vm。

由于文章写太长了，预计没人看，所以本文对代码举行了简化，有些处所没写出来，其他都是比较简朴的处所。有兴致的可以本身去看一下，末了补一张图，结合起来看源码更能事半功倍。这张图要我本身经由过程源码画出来，再给我看几天我也是画不出来的，所以还须要勤奋啊