vuex插件

有了上文作为铺垫，我们就可以很轻松的来解释vuex的原理了。
Vuex仅仅是Vue的一个插件。Vuex只能使用在vue上，因为其高度依赖于Vue的双向绑定和插件系统。
Vuex的注入代码比较简单，调用了一下applyMixin方法，现在的版本其实就是调用了Vue.mixin，在所有组件的 beforeCreate生命周期注入了设置 this.$store这样一个对象。

  1. // src/store.js
  2. export function install (_Vue) {
  3.   if (Vue && _Vue === Vue) {
  4.     return
  5.   }
  6.   Vue = _Vue
  7.   applyMixin(Vue)
  8. }
  10. // src/mixins.js
  11. export default function (Vue) {
  12.   const version = Number(Vue.version.split('.')[0])
  14.   if (version >= 2) {
  15.     Vue.mixin({ beforeCreate: vuexInit })
  16.   } else {
  17.     const _init = Vue.prototype._init
  18.     Vue.prototype._init = function (options = {}) {
  19.       options.init = options.init
  20.         ? [vuexInit].concat(options.init)
  21.         : vuexInit
  22.       _init.call(this, options)
  23.     }
  24.   }
  26.   function vuexInit () {
  27.     const options = this.$options
  28.     // store injection
  29.     if (options.store) {
  30.       this.$store = typeof options.store === 'function'
  31.         ? options.store()
  32.         : options.store
  33.     } else if (options.parent && options.parent.$store) {
  34.       this.$store = options.parent.$store
  35.     }
  36.   }
  37. }

划重点：1行代码 Vue.mixin
那么 Vuex.Store 是如何实现的呢？

  1. // src/store.js
  2. constructor (options = {}) {
  3.   const {
  4.     plugins = [],
  5.     strict = false
  6.   } = options
  8.   // store internal state
  9.   this._committing = false
  10.   this._actions = Object.create(null)
  11.   this._actionSubscribers = []
  12.   this._mutations = Object.create(null)
  13.   this._wrappedGetters = Object.create(null)
  14.   this._modules = new ModuleCollection(options)
  15.   this._modulesNamespaceMap = Object.create(null)
  16.   this._subscribers = []
  17.   this._watcherVM = new Vue()
  19.   const store = this
  20.   const { dispatch, commit } = this
  21.   this.dispatch = function boundDispatch (type, payload) {
  22.     return dispatch.call(store, type, payload)
  23. }
  24.   this.commit = function boundCommit (type, payload, options) {
  25.     return commit.call(store, type, payload, options)
  26. }
  28.   // strict mode
  29.   this.strict = strict
  31.   const state = this._modules.root.state
  33.   // init root module.
  35.   // this also recursively registers all sub-modules
  36.   // and collects all module getters inside this._wrappedGetters
  37.   installModule(this, state, [], this._modules.root)
  39.   resetStoreVM(this, state)
  41.   // apply plugins
  42.   plugins.forEach(plugin => plugin(this))
  44. }

划重点：其实上面的代码绝大部分都不需要关注的 - -。
其实重点就是一行代码 resetStoreVM(this, state)。
那么 resetStoreVM 里面是什么呢？

  1. // src/store.js
  2. function resetStoreVM (store, state, hot) {
  3.   Vue.config.silent = true
  4.   store._vm = new Vue({
  5.     data: {
  6.       $$state: state
  7.     },
  8.     computed
  9.   })
  10. }

划重点： 还是一行代码：new Vue。通过 Vue自己的双向绑定然后注入
你是不是以为就这样结束了呢？ NoNoNo，当你再Vue中通过this如果调用store的数据呢？

  1. // 当获取state时，返回以双向绑定的$$sate
  2. var prototypeAccessors$1 = { state: { configurable: true } };
  4. prototypeAccessors$1.state.get = function () {
  5.   return this._vm._data.$$state
  6. };
  8. // 将state定义在原型中
  9. Object.defineProperties( Store.prototype, prototypeAccessors$1 );

其实就是获取 this._vm._data.$$state 而已

总结

Vue的双向绑定通过调用new Vue实现，然后通过Vue.mixin注入到Vue的生命周期中，再通过劫持state.get将数据放入组件中。