1 vuex到底是什么

代碼開(kāi)頭就是：global.Vuex = factory();標(biāo)識(shí)傳入的全局對(duì)象的vuex屬性是一個(gè)返回執(zhí)行的返回結(jié)果
而factory函數(shù)返回的是index對(duì)象，代碼下圖所示：
var index = {
  Store: Store,
  install: install,
  version: '3.1.0',
  mapState: mapState,
  mapMutations: mapMutations,
  mapGetters: mapGetters,
  mapActions: mapActions,
  createNamespacedHelpers: createNamespacedHelpers
};  
return index

說(shuō)明vuex是一個(gè)對(duì)象有Store,install一直到createNamespacedHelpers等8個(gè)屬性，其中version就是版本號(hào)了，我們不需要詳細(xì)研究了，下面我們簡(jiǎn)單看下其他七個(gè)屬性

2 install屬性

install函數(shù)在主要是將在vuex運(yùn)行前加載vue，并將vue中options參數(shù)中的store函數(shù)或者屬性保存為this.$store

 //vuex的install屬性對(duì)應(yīng)的install函數(shù),
 function install (_Vue) {
   if (Vue && _Vue === Vue) {
     {
       console.error(
         '[vuex] already installed. Vue.use(Vuex) should be called only once.'
       );
     }
     return
   }
   Vue = _Vue;
   applyMixin(Vue);
 }
//在vue初始化是注入vuex參數(shù)
 function applyMixin (Vue) {
   var version = Number(Vue.version.split('.')[0]);

   if (version >= 2) {
     Vue.mixin({ beforeCreate: vuexInit });
   } else {
     // override init and inject vuex init procedure
     // for 1.x backwards compatibility.
     var _init = Vue.prototype._init;
     Vue.prototype._init = function (options) {
       if ( options === void 0 ) options = {};

       options.init = options.init
         ? [vuexInit].concat(options.init)
         : vuexInit;
       _init.call(this, options);
     };
   }


   function vuexInit () {
     var options = this.$options;
     // store injection
     if (options.store) {
       this.$store = typeof options.store === 'function'
         ? options.store()
         : options.store;
     } else if (options.parent && options.parent.$store) {
       this.$store = options.parent.$store;
     }
   }
 } 

3 module 從Store.module屬性中的模塊對(duì)象開(kāi)始，然后遍歷其中的每個(gè)單獨(dú)的模塊，主要定義了_children和state,_rawModule三個(gè)屬性，分別是傳入的參數(shù)和其state,

    var Module = function Module (rawModule, runtime) {
    console.log(rawModule,runtime)
  this.runtime = runtime;
  // Store some children item
  this._children = Object.create(null);
  // Store the origin module object which passed by programmer
  this._rawModule = rawModule;
  var rawState = rawModule.state;

  // Store the origin module's state
  this.state = (typeof rawState === 'function' ? rawState() : rawState) || {};
};

var prototypeAccessors = { namespaced: { configurable: true } };

prototypeAccessors.namespaced.get = function () {//為_(kāi)children對(duì)象添加子模塊
  return !!this._rawModule.namespaced
};
Module.prototype.addChild = function addChild (key, module) {
  this._children[key] = module;
};
Module.prototype.removeChild = function removeChild (key) {//為_(kāi)children對(duì)象刪除子模塊
  delete this._children[key];
};

Module.prototype.getChild = function getChild (key) {//獲取_children對(duì)象特定子模塊
  return this._children[key]
};

Module.prototype.update = function update (rawModule) {//重置了模塊的actions,mutaions，getter
  this._rawModule.namespaced = rawModule.namespaced;
  if (rawModule.actions) {
    this._rawModule.actions = rawModule.actions;
  }
  if (rawModule.mutations) {
    this._rawModule.mutations = rawModule.mutations;
  }
  if (rawModule.getters) {
    this._rawModule.getters = rawModule.getters;
  }
};

Module.prototype.forEachChild = function forEachChild (fn) { //對(duì)每個(gè)子模塊進(jìn)行操作
  forEachValue(this._children, fn);
};

Module.prototype.forEachGetter = function forEachGetter (fn) { //對(duì)每個(gè)模塊的getters操作
  if (this._rawModule.getters) {
    forEachValue(this._rawModule.getters, fn);
  }
};

Module.prototype.forEachAction = function forEachAction (fn) {//操作每個(gè)子模塊的actions方法
  if (this._rawModule.actions) {
    forEachValue(this._rawModule.actions, fn);
  }
};

Module.prototype.forEachMutation = function forEachMutation (fn) {//操作每個(gè)模塊的mutations方法
  if (this._rawModule.mutations) {
    forEachValue(this._rawModule.mutations, fn);
  }
};

4 ModuleCollection module的集合，就是對(duì)上面的modules的操作

var ModuleCollection = function ModuleCollection (rawRootModule) {
  this.register([], rawRootModule, false);
};

ModuleCollection.prototype.get = function get (path) {返回module的子集合
  return path.reduce(function (module, key) {
    return module.getChild(key)
  }, this.root)
};

ModuleCollection.prototype.getNamespace = function getNamespace (path) {//獲取module的命名空間
  var module = this.root;
  return path.reduce(function (namespace, key) {
    module = module.getChild(key);
    return namespace + (module.namespaced ? key + '/' : '')
  }, '')
};

ModuleCollection.prototype.update = function update$1 (rawRootModule) {//更新module
  update([], this.root, rawRootModule);
};

ModuleCollection.prototype.register = function register (path, rawModule, runtime) {//更新module
    var this$1 = this;
    if ( runtime === void 0 ) runtime = true;
  {
    assertRawModule(path, rawModule);
  }

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

  // register nested modules
  if (rawModule.modules) {
    forEachValue(rawModule.modules, function (rawChildModule, key) {
      this$1.register(path.concat(key), rawChildModule, runtime);
    });
  }
};

ModuleCollection.prototype.unregister = function unregister (path) {
  var parent = this.get(path.slice(0, -1));
  var key = path[path.length - 1];
  if (!parent.getChild(key).runtime) { return }

  parent.removeChild(key);
};

5 store 屬性

確保vuex加載，以及一些用法規(guī)則警告，設(shè)置一些初始化參數(shù)和dispatch commit方法綁定到store，初始化module加載插件等,執(zhí)行獲取，更改state，執(zhí)行action,mutations方法

    var this$1 = this;
    if ( options === void 0 ) options = {};

    // Auto install if it is not done yet and `window` has `Vue`.
    // To allow users to avoid auto-installation in some cases,
    // this code should be placed here. See #731
    if (!Vue && typeof window !== 'undefined' && window.Vue) {
      install(window.Vue);
    }

    {
      assert(Vue, "must call Vue.use(Vuex) before creating a store instance.");
      assert(typeof Promise !== 'undefined', "vuex requires a Promise polyfill in this browser.");
      assert(this instanceof Store, "store must be called with the new operator.");
    }

    var plugins = options.plugins; if ( plugins === void 0 ) plugins = [];
    var strict = options.strict; if ( strict === void 0 ) strict = false;

    // 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
    var store = this;
    var ref = this;
    var dispatch = ref.dispatch;
    var commit = ref.commit;
    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;

    var state = this._modules.root.state;

    // init root module.
    // this also recursively registers all sub-modules
    // and collects all module getters inside this._wrappedGetters
    installModule(this, state, [], this._modules.root);//

    // initialize the store vm, which is responsible for the reactivity
    // (also registers _wrappedGetters as computed properties)
    resetStoreVM(this, state); //將state里面的getter設(shè)置getter,并將$$state放到vue里面的data里進(jìn)行監(jiān)聽(tīng)

    // apply plugins
    plugins.forEach(function (plugin) { return plugin(this$1); });//執(zhí)行插件

    var useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools;
    if (useDevtools) { //是否用到Vue Devtools插件，然后適配
      devtoolPlugin(this);
    }
  };

  var prototypeAccessors$1 = { state: { configurable: true } };

  prototypeAccessors$1.state.get = function () { //獲取state
    return this._vm._data.$$state
  };

  prototypeAccessors$1.state.set = function (v) {//不能直接修改state
    {
      assert(false, "use store.replaceState() to explicit replace store state.");
    }
  };

  Store.prototype.commit = function commit (_type, _payload, _options) {//執(zhí)行commit方法
      var this$1 = this;

    // check object-style commit
    var ref = unifyObjectStyle(_type, _payload, _options);
      var type = ref.type;
      var payload = ref.payload;
      var options = ref.options;

    var mutation = { type: type, payload: payload };
    var entry = this._mutations[type];
    if (!entry) {
      {
        console.error(("[vuex] unknown mutation type: " + type));
      }
      return
    }
    this._withCommit(function () {
      entry.forEach(function commitIterator (handler) {
        handler(payload);
      });
    });
    this._subscribers.forEach(function (sub) { return sub(mutation, this$1.state); });

    if (
      options && options.silent
    ) {
      console.warn(
        "[vuex] mutation type: " + type + ". Silent option has been removed. " +
        'Use the filter functionality in the vue-devtools'
      );
    }
  };

  Store.prototype.dispatch = function dispatch (_type, _payload) {//觸發(fā)dispath方法，
      var this$1 = this;

    // check object-style dispatch
    var ref = unifyObjectStyle(_type, _payload);
      var type = ref.type;
      var payload = ref.payload;

    var action = { type: type, payload: payload };
    var entry = this._actions[type];
    if (!entry) {
      {
        console.error(("[vuex] unknown action type: " + type));
      }
      return
    }

    try {
      this._actionSubscribers
        .filter(function (sub) { return sub.before; })
        .forEach(function (sub) { return sub.before(action, this$1.state); });//調(diào)用action運(yùn)行前的before方法
    } catch (e) {
      {
        console.warn("[vuex] error in before action subscribers: ");
        console.error(e);
      }
    }

    var result = entry.length > 1
      ? Promise.all(entry.map(function (handler) { return handler(payload); }))//執(zhí)行promise
      : entry[0](payload);

    return result.then(function (res) {
      try {
        this$1._actionSubscribers
          .filter(function (sub) { return sub.after; })
          .forEach(function (sub) { return sub.after(action, this$1.state); });//調(diào)用action運(yùn)行后的after方法
      } catch (e) {
        {
          console.warn("[vuex] error in after action subscribers: ");
          console.error(e);
        }
      }
      return res
    })
  };

  Store.prototype.subscribe = function subscribe (fn) { //刪除action方法數(shù)組中的fn
    return genericSubscribe(fn, this._subscribers)
  };

  Store.prototype.subscribeAction = function subscribeAction (fn) {//mutation方法中的fn
    var subs = typeof fn === 'function' ? { before: fn } : fn;
    return genericSubscribe(subs, this._actionSubscribers)
  };

  Store.prototype.watch = function watch (getter, cb, options) {//監(jiān)聽(tīng)函數(shù)
      var this$1 = this;

    {
      assert(typeof getter === 'function', "store.watch only accepts a function.");
    }
    return this._watcherVM.$watch(function () { return getter(this$1.state, this$1.getters); }, cb, options)
  };

  Store.prototype.replaceState = function replaceState (state) {//重置state
      var this$1 = this;

    this._withCommit(function () {
      this$1._vm._data.$$state = state;//vuex中的state被設(shè)置為_(kāi)vm.data.$$state中
    });
  };

  Store.prototype.registerModule = function registerModule (path, rawModule, options) {
      if ( options === void 0 ) options = {};

    if (typeof path === 'string') { path = [path]; }

    {
      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);
    // reset store to update getters...
    resetStoreVM(this, this.state);
  };

  Store.prototype.unregisterModule = function unregisterModule (path) {//刪除module
      var this$1 = this;

    if (typeof path === 'string') { path = [path]; }

    {
      assert(Array.isArray(path), "module path must be a string or an Array.");
    }

    this._modules.unregister(path);
    this._withCommit(function () {
      var parentState = getNestedState(this$1.state, path.slice(0, -1));
      Vue.delete(parentState, path[path.length - 1]);
    });
    resetStore(this);
  };

  Store.prototype.hotUpdate = function hotUpdate (newOptions) { //更新module,重置store
    this._modules.update(newOptions);
    resetStore(this, true);
  };

  Store.prototype._withCommit = function _withCommit (fn) {//執(zhí)行函數(shù)
    var committing = this._committing;
    this._committing = true;
    fn();
    this._committing = committing;
  };  

6 mapState

在vue里獲取輔助函數(shù)獲取多個(gè)state值的映射

7mapMutations

簡(jiǎn)化代碼執(zhí)行mutations的輔助函數(shù)，第一個(gè)參數(shù)可以使模塊的路徑，該路徑為上下文，執(zhí)行后面的模塊里的mutations方法

8mapGetters

store 中的 getter 映射到局部計(jì)算屬性

9 mapActions

mapState 和mapMutations類(lèi)似，執(zhí)行的是actions方法

9 createNamespacedHelpers

為一個(gè)特定的命名空間，返回mapState，mapMutations，mapGetters，mapMutations的對(duì)象集合

總結(jié)

vuex是將Store實(shí)例注入到Vue的_init初始化過(guò)程或者beforeCreated周期函數(shù)上調(diào)用，將vue.$store綁定store的實(shí)例,創(chuàng)建vue的實(shí)例vm，將state放在vm的data中的$$state進(jìn)行監(jiān)聽(tīng)，這也就是所有的vue實(shí)例上getter,action,mutation都是一樣的，只要修改state，所有的vue實(shí)例都可以獲取到修改后的state,