Vuex 交流學習篇。

時間  2020-03-18
標籤 vuex 交流 學習 简体版
原文   原文鏈接

Vuex 是什麼？

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以利用 Vue.js 的細粒度數據響應機制來進行高效的狀態更新。它的核心概念有State，Getter，Mutation，Action，Module。vue

Vuex

Vuex 初始化

安裝

在項目中 import Vuex from 'vuex' 的時候，實際上引用的是一個對象，它的定義在/node_modules/vuex 中：node

var index = {
      Store: Store,
      install: install,
      version: '3.1.2',
      mapState: mapState,
      mapMutations: mapMutations,
      mapGetters: mapGetters,
      mapActions: mapActions,
      createNamespacedHelpers: createNamespacedHelpers
    };
  return index;
複製代碼

Vue.use(Vuex) 實質上是啓動了 vuex 的install方法 安裝到vuereact

function initUse (Vue) {
    Vue.use = function (plugin) {
      var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
      if (installedPlugins.indexOf(plugin) > -1) {
        return this
      }

      // additional parameters
      var args = toArray(arguments, 1);
      args.unshift(this);
      if (typeof plugin.install === 'function') {
        plugin.install.apply(plugin, args);
      } else if (typeof plugin === 'function') {
        plugin.apply(null, args);
      }
      installedPlugins.push(plugin);
      return this
    };
  }

  function install (_Vue) {
    if (Vue && _Vue === Vue) {
      if (process.env.NODE_ENV !== 'production') {
        console.error(
          '[vuex] already installed. Vue.use(Vuex) should be called only once.'
        );
      }
      return
    }
    Vue = _Vue;
    applyMixin(Vue);
  }
複製代碼

能夠看出install 的邏輯很簡單，就是把傳入的 _Vue 賦值給 Vue 並執行了 applyMixin(Vue) 方法。vuex

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

      /**
      * Vuex init hook, injected into each instances init hooks list.
      */

      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;
        }
      }
    }
複製代碼

從applyMixin方法中能夠看出它會先判斷Vue版本號，對於 Vue 2.0 以上版本，它其實就全局混入了一個 beforeCreate 鉤子函數，在建立前把 options.store 保存在全部組件的 this.$store 中，這個 options.store 就是咱們在實例化 Store 對象的實例。bash

Store 實例化

其實 這裏 大體 能夠分爲三步：數據結構

var Store = function Store (options) {
    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);
    }

    if (process.env.NODE_ENV !== 'production') {
      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();
    this._makeLocalGettersCache = Object.create(null);

    // 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); 第三部 註冊 Store 實例

    // apply plugins
    plugins.forEach(function (plugin) { return plugin(this$1); });

    var useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools;
    if (useDevtools) {
      devtoolPlugin(this);
    }
  };
複製代碼

第一步：實例化模塊，建立模塊樹

模塊對於 Vuex 的意義：若是應用變得複雜時，使用單一狀態樹，應用的全部狀態會集中到一個比較大的對象，store 對象就有可能變得至關臃腫。Vuex 爲了解決這個問題容許咱們將 store 分割成模塊（module）。而且每一個模塊擁有本身的 state、mutation、action、getter。 但從數據結構來看，模塊的設計是樹形結構，本身是一個 root module 模塊，下面有子模塊Vuex 須要完成這顆樹的構建，構建過程的入口就是：app

this._modules = new ModuleCollection(options)
複製代碼

經過 debugger 能夠發現 ModuleCollection 的實例化過程實則是執行了 register 方法。ide

var ModuleCollection = function ModuleCollection (rawRootModule) {
    // register root module (Vuex.Store options)
    this.register([], rawRootModule, false);
  };
複製代碼
ModuleCollection.prototype.register = function register (path, rawModule, runtime) {
      var this$1 = this;
      if ( runtime === void 0 ) runtime = true;

    if (process.env.NODE_ENV !== 'production') {
      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);
      });
    }
  };
複製代碼

register 方法 首先是 經過 var newModule = new Module(rawModule, runtime) 獲得modules實例;函數

var Module = function Module (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) || {}; }; 複製代碼

經過Module 的構造函數 主要有 3個 屬性，this._rawModule 表示模塊的配置，this._children 表示它的全部子模塊，this.state 表示這個模塊定義的 state。學習

在 register 函數中 實例化一個 Module 後，會判斷 當前 path 的長度，若是爲0，它就是一個根模塊，會將 newModule 實例賦值給this.root,不然就 會運行以下代碼創建父子關係。

const parent = this.get(path.slice(0, -1));
  parent.addChild(path[path.length - 1], newModule)
複製代碼

這一步的代碼 很清晰，先找到 父，而後經過父模塊的addChild 創建父子模塊。 再回到register 方法 它的最後一步判斷若是有子模塊存在 就根據 key 做爲 path，遞歸調用register方法，這樣在上一步判斷 path 長度時就不會爲0了。

ModuleCollection.prototype.get = function get (path) {
    return path.reduce(function (module, key) {
      return module.getChild(key)
    }, this.root)
  };
複製代碼

傳入的 path 是它的父模塊的 path，而後從根模塊開始，經過 reduce 方法一層層去找到對應的模塊，查找的過程當中，執行的是 module.getChild(key) 方法：

Module.prototype.getChild = function getChild (key) {
    return this._children[key]
  };
複製代碼

看代碼一目瞭然，就是返回當前模塊的 _children 中對應 key 的模塊，每一個模塊的 _children 是經過執行 parent.addChild(path[path.length - 1], newModule) 方法添加：

Module.prototype.addChild = function addChild (key, module) {
    this._children[key] = module;
  };
複製代碼

其實 對於 子模塊而言，它們的 parent 就是上一層 module，這樣它們就會經過 父模塊的 addChild 方法被添加到 父模塊 的 _children 中。遞歸執行這樣的過程，實例出一顆完整的模塊樹。

第二步：安裝模塊

實例化完模塊後, debugger回到 Store 函數中。

var state = this._modules.root.state;
  installModule(this, state, [], this._modules.root);
複製代碼

installModule 函數以下：

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

    // register in namespace map
    if (module.namespaced) {
      if (store._modulesNamespaceMap[namespace] && process.env.NODE_ENV !== 'production') {
        console.error(("[vuex] duplicate namespace " + namespace + " for the namespaced module " + (path.join('/'))));
      }
      store._modulesNamespaceMap[namespace] = module;
    }

    // set state
    if (!isRoot && !hot) {
      var parentState = getNestedState(rootState, path.slice(0, -1));
      var moduleName = path[path.length - 1];
      store._withCommit(function () {
        if (process.env.NODE_ENV !== 'production') {
          if (moduleName in parentState) {
            console.warn(
              ("[vuex] state field \"" + moduleName + "\" was overridden by a module with the same name at \"" + (path.join('.')) + "\"")
            );
          }
        }
        Vue.set(parentState, moduleName, module.state);
      });
    }

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

    module.forEachMutation(function (mutation, key) {
      var namespacedType = namespace + key;
      registerMutation(store, namespacedType, mutation, local);
    });

    module.forEachAction(function (action, key) {
      var type = action.root ? key : namespace + key;
      var handler = action.handler || action;
      registerAction(store, type, handler, local);
    });

    module.forEachGetter(function (getter, key) {
      var namespacedType = namespace + key;
      registerGetter(store, namespacedType, getter, local);
    });

    module.forEachChild(function (child, key) {
      installModule(store, rootState, path.concat(key), child, hot);
    });
  }
複製代碼

installModule 函數方法有 5 個入參，store 表示 root store；state 表示 root state；path 表示模塊的訪問路徑；module 表示當前的模塊，hot 表示是不是熱更新。

默認狀況下，模塊內部的 action、mutation 和 getter 是註冊在全局命名空間的——這樣使得多個模塊可以對同一 mutation 或 action 做出響應。

若是但願你的模塊具備更高的封裝度和複用性，你能夠經過添加 namespaced: true 的方式使其成爲帶命名空間的模塊。當模塊被註冊後，它的全部 getter、action 及 mutation 都會自動根據模塊註冊的路徑調整命名。啓用了命名空間的 getter 和 action 會收到局部化的 getter，dispatch 和 commit。換言之，你在使用模塊內容（module assets）時不須要在同一模塊內額外添加空間名前綴。更改 namespaced 屬性後不須要修改模塊內的代碼。 獲取命名空間的方法以下：

const namespace = store._modules.getNamespace(path)
複製代碼

方法的具體實現：

ModuleCollection.prototype.getNamespace = function getNamespace (path) {
    var module = this.root;
    return path.reduce(function (namespace, key) {
      module = module.getChild(key);
      return namespace + (module.namespaced ? key + '/' : '')
    }, '')
  };
複製代碼

namespaced 爲 true 且 沒有衝突的狀況下會將 namespace 對應的模塊保存下來 :

store._modulesNamespaceMap[namespace] = module;
複製代碼

接下來 會 判斷 是否 是root 而後執行 如下方法 拿到 state，而後經過Vue.set 一層層 初始化 state。

function getNestedState (state, path) {
    return path.length
      ? path.reduce(function (state, key) { return state[key]; }, state)
      : state
  }
複製代碼

接下來會執行 makeLocalContext 方法：

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

   var local = {
     dispatch: noNamespace ? store.dispatch : function (_type, _payload, _options) {
       var args = unifyObjectStyle(_type, _payload, _options);
       var payload = args.payload;
       var options = args.options;
       var type = args.type;

       if (!options || !options.root) {
         type = namespace + type;
         if (process.env.NODE_ENV !== 'production' && !store._actions[type]) {
           console.error(("[vuex] unknown local action type: " + (args.type) + ", global type: " + type));
           return
         }
       }

       return store.dispatch(type, payload)
     },

     commit: noNamespace ? store.commit : function (_type, _payload, _options) {
       var args = unifyObjectStyle(_type, _payload, _options);
       var payload = args.payload;
       var options = args.options;
       var type = args.type;

       if (!options || !options.root) {
         type = namespace + type;
         if (process.env.NODE_ENV !== 'production' && !store._mutations[type]) {
           console.error(("[vuex] unknown local mutation type: " + (args.type) + ", global type: " + type));
           return
         }
       }

       store.commit(type, payload, options);
     }
   };

   // getters and state object must be gotten lazily
   // because they will be changed by vm update
   Object.defineProperties(local, {
     getters: {
       get: noNamespace
         ? function () { return store.getters; }
         : function () { return makeLocalGetters(store, namespace); }
     },
     state: {
       get: function () { return getNestedState(store.state, path); }
     }
   });

   return local
 }
複製代碼

makeLocalContext 有 3 個入參，store 表示 root store；namespace 表示模塊的命名空間，path 表示模塊的 path。該方法定義了 local 對象，對於 dispatch 和 commit 方法，若是沒有 namespace，它們就直接指向了 root store 的 dispatch 和 commit 方法，不然會建立方法，把 type 自動拼接上 namespace，而後執行 store 上對應的方法。

debugger 回到 installModule ，這裏接下來就是 分別完成 Mutation，Action，Getter 的註冊。

function registerMutation (store, type, handler, local) {
    var entry = store._mutations[type] || (store._mutations[type] = []);
    entry.push(function wrappedMutationHandler (payload) {
      handler.call(store, local.state, payload);
    });
  }
  function registerAction (store, type, handler, local) {
    var entry = store._actions[type] || (store._actions[type] = []);
    entry.push(function wrappedActionHandler (payload) {
      var res = handler.call(store, {
        dispatch: local.dispatch,
        commit: local.commit,
        getters: local.getters,
        state: local.state,
        rootGetters: store.getters,
        rootState: store.state
      }, payload);
      if (!isPromise(res)) {
        res = Promise.resolve(res);
      }
      if (store._devtoolHook) {
        return res.catch(function (err) {
          store._devtoolHook.emit('vuex:error', err);
          throw err
        })
      } else {
        return res
      }
    });
  }

  function registerGetter (store, type, rawGetter, local) {
    if (store._wrappedGetters[type]) {
      if (process.env.NODE_ENV !== 'production') {
        console.error(("[vuex] duplicate getter key: " + type));
      }
      return
    }
    store._wrappedGetters[type] = function wrappedGetter (store) {
      return rawGetter(
        local.state, // local state
        local.getters, // local getters
        store.state, // root state
        store.getters // root getters
      )
    };
  }
複製代碼

installModule 方法會完成模塊下的 state、mutations、actions、getters、 的初始化工做，而且經過遞歸遍歷的方式，就完成了全部子模塊的安裝工做。

第三步 註冊 Store 實例

安裝完模塊後, debugger回到 Store 函數中。

resetStoreVM(this, state);
複製代碼

下面是方法定義：

function resetStoreVM (store, state, hot) {
    var oldVm = store._vm;

    // bind store public getters
    store.getters = {};
    // reset local getters cache
    store._makeLocalGettersCache = Object.create(null);
    var wrappedGetters = store._wrappedGetters;
    var computed = {};
    forEachValue(wrappedGetters, function (fn, key) {
      // use computed to leverage its lazy-caching mechanism
      // direct inline function use will lead to closure preserving oldVm.
      // using partial to return function with only arguments preserved in closure environment.
      computed[key] = partial(fn, store);
      Object.defineProperty(store.getters, key, {
        get: function () { return store._vm[key]; },
        enumerable: true // for local getters
      });
    });

    // use a Vue instance to store the state tree
    // suppress warnings just in case the user has added
    // some funky global mixins
    var silent = Vue.config.silent;
    Vue.config.silent = true;
    store._vm = new Vue({
      data: {
        $$state: state
      },
      computed: computed
    });
    Vue.config.silent = silent;

    // enable strict mode for new vm
    if (store.strict) {
      enableStrictMode(store);
    }

    if (oldVm) {
      if (hot) {
        // dispatch changes in all subscribed watchers
        // to force getter re-evaluation for hot reloading.
        store._withCommit(function () {
          oldVm._data.$$state = null;
        });
      }
      Vue.nextTick(function () { return oldVm.$destroy(); });
    }
  }
複製代碼

resetStoreVM 首先遍歷了 _wrappedGetters 得到每一個 getter 的函數 fn 和 key，而後定義了 computed[key] = () => fn(store)。這裏的_wrappedGetters 方法就定義在 安裝模塊 registerGetter 方法中。fn(store) 等於以下方法：

store._wrappedGetters[type] = function wrappedGetter (store) {
    return rawGetter(
      local.state, // local state
      local.getters, // local getters
      store.state, // root state
      store.getters // root getters
    )
  }
複製代碼

實則 咱們 訪問 store.getters 是訪問了store 實例 上的 get方法。

computed[key] = partial(fn, store);
  Object.defineProperty(store.getters, key, {
    get: function () { return store._vm[key]; },
    enumerable: true // for local getters
  });
複製代碼

根據 key 訪問 store.getters 的某一個 getter 的時候，實際上就是訪問了 store._vm[key]，也就是 computed[key]，在執行 computed[key] 對應的函數的時候，會執行 rawGetter 方法，那麼就會訪問到 store.state，進而訪問到 store._vm._data.$$state，這樣就創建了一個依賴關係。當 store.state 發生變化的時候，下一次再訪問 store.getters 的時候會從新計算，這裏的 store._vm 建立過程在代碼中也清晰可見。

當嚴格模式下，store._vm 會添加一個 wathcer 來觀測 this._data.$$state 的變化，也就是當 store.state 被修改的時候, store._committing 必須爲 true，不然在開發階段會報警告。

function enableStrictMode (store) {
    store._vm.$watch(function () { return this._data.$$state }, function () {
      if (process.env.NODE_ENV !== 'production') {
        assert(store._committing, "do not mutate vuex store state outside mutation handlers.");
      }
    }, { deep: true, sync: true });
  }
複製代碼

從 debugger 能夠看到，在 Commit 過程當中會執行 _withCommit 函數， 其實也就是 在 fn 以前 將_committing 變量 改成true。

Store.prototype._withCommit = function _withCommit (fn) {
    var committing = this._committing;
    this._committing = true;
    fn();
    this._committing = committing;
  };
複製代碼

發佈一篇以前在 vuex 方面的自我學習文章，歡迎交流學習。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程