VUEX源碼學習筆記（第1~4章，共6章）

時間  2019-12-12
標籤 vuex 源碼 學習 筆記 简体版
原文   原文鏈接

VUEX源碼學習筆記

本書將記錄有關VUEX源碼學習的心得體會，對應的VUEX的版本爲2.4.1。全書分6個章節進行展開：vue

  1. 概述。本章將從總體上講解VUEX源碼的構成，造成一個初步的認識。
  2. Module類。Moudle實例是構成Modulele類的主要內容，本章將介紹VUEX源碼中的Module類相關內容。
  3. ModuleColletion類。ModuleColletion實例是組成Store類的重要內容，本章將介紹VUEX源碼中的ModuleColletion類相關內容。
  4. Store類。Store類是VUEX導出的主要內容，本章將介紹Store類的相關內容。
  5. 輔助函數。本章將介紹輔助函數的相關內容。
  6. 總結。本章將對全書進行總結。
整理人：DuLinRain
首次整理時間：2017-10-19
最後整理時間：2017-10-22

更多內容可查看本人博客以及githubnode

第一章 概述

1.1 Vuex是什麼？

按照官方的說法：react

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

1.2 Vuex導出了什麼？

一般咱們在實例化一個store的時候都是採用的下面這種方式：git

import Vuex from 'vuex'

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

有時候咱們將VUEX的state混入到計算屬性時會採用這種方式：github

// 在單獨構建的版本中輔助函數爲 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭頭函數可以使代碼更簡練
    count: state => state.count,

    // 傳字符串參數 'count' 等同於 `state => state.count`
    countAlias: 'count',

    // 爲了可以使用 `this` 獲取局部狀態，必須使用常規函數
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

很明顯，由上面代碼能夠看出，VUEX導出了一個對象，而Store、mapState都只是這個對象的屬性而已。那麼，咱們不由會產生疑問：VUEX到底導出了些什麼東西呢？vuex

咱們看看VUEX的源代碼的 925 ~ 937 行：數組

var index = {
  Store: Store,//Store類
  install: install,//install方法
  version: '2.4.1',
  mapState: mapState,
  mapMutations: mapMutations,
  mapGetters: mapGetters,
  mapActions: mapActions,
  createNamespacedHelpers: createNamespacedHelpers//基於命名空間的組件綁定輔助函數
};

return index;

VUEX採用的是典型的IIFE(當即執行函數表達式)模式，當代碼被加載(經過<script>或Vue.use())後，VUEX會返回一個對象，這個對象包含了Store類、install方法、mapState輔助函數、mapMutations輔助函數、mapGetters輔助函數、mapActions輔助函數、createNamespacedHelpers輔助函數以及當前的版本號version。app

1.2 Vuex源碼的總體結構是怎樣的？

縱觀整個代碼解構能夠得出以下結論：異步

  1. 代碼12 ~ 105 行定義了一些類型檢測、遍歷之類的輔助函數。
  2. 代碼106 ~ 168 行定義了Module類。
  3. 代碼169 ~ 251 行定義了ModuleCollection類。
  4. 代碼253 ~ 293 行定義了幾個斷言輔助函數。
  5. 代碼294 ~ 775 行定義了Store類。
  6. 代碼777 ~ 788 行定義了install方法。
  7. 代碼790 ~ 815 行定義了mapState輔助函數。
  8. 代碼817 ~ 841 行定義了mapMutations輔助函數。
  9. 代碼843 ~ 864 行定義了mapGetters輔助函數。
  10. 代碼866 ~ 890 行定義了mapActions輔助函數。
  11. 代碼892 ~ 924 行定義了生成mapState、mapMutations、mapGetters、mapActions的輔助函數。
  12. 代碼925 ~ 937 行對主要內容進行了導出。

從以上分析能夠看出，VUEX源碼主要由Store類和mapState、mapMutations、mapGetters、mapActions四個輔助函數組成，其中Store類又由ModuleCollection實例組成，ModuleCollection類又由Module實例組成。VUEX源碼就是經過這樣的關係組織起來的。ide

第二章 Module類

Module類定義在VUEX源碼的106 ~ 168 行，咱們來具體看看它的內容。

2.1 成員屬性

Module類的成員屬性有四個，分別是：

  1. runtime。表示是否運行時，類型Boolean。
  2. _children。存儲該模塊的直接子模塊，類型Object。
  3. _rawModule。存儲該模塊自身，類型Object。
  4. state。存儲該模塊的state，類型Object。

其源碼定義在106 ~ 112 行：

var Module = function Module (rawModule, runtime) {
  this.runtime = runtime;
  this._children = Object.create(null);
  this._rawModule = rawModule;
  var rawState = rawModule.state;
  this.state = (typeof rawState === 'function' ? rawState() : rawState) || {};
};

該類的定義無特殊之處，但從中咱們能夠看出，定義模塊的state時，並不必定須要它是一個對象，它也能夠是返回一個對象的工廠函數。由於從代碼的執行來看，當state屬性的值是一個函數時，會把這個函數的執行結果做爲state。這一點在官方文檔中是沒有說起的。

咱們能夠經過下面這個例子來證實：

const store = new Vuex.Store({
  state() {
    return {
        count: 0,
        todos: [
          { id: 1, text: '...', done: true },
          { id: 2, text: '...', done: false }
        ]
    }
  }
})
console.log(store)

其輸出結果以下：

圖片描述

2.2 原型函數

Module原型上分別定義了：

  1. 操做_children屬性的addChild、removeChild、getChild、forEachChild四個方法。
  2. 操做_rawModule屬性的update、forEachGetter、forEachAction、forEachMutation四個方法。

咱們來分別看一看這幾個方法的實現。

2.2.1 Module.prototype.addChild方法

addChild方法定義在VUEX源碼的120 ~ 122 行，它的實現比較簡單，就是將模塊名稱做爲key，模塊內容做爲value定義在父模塊的_children對象上：

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

2.2.2 Module.prototype.removeChild方法

removeChild方法定義在VUEX源碼的124 ~ 126 行，它的實現也比較簡單，就是採用刪除對象屬性的方法，將定義在父模塊_children屬性上的子模塊delete：

Module.prototype.removeChild = function removeChild (key) {
  delete this._children[key];
};

2.2.3 Module.prototype.getChild方法

getChild方法定義在VUEX源碼的128 ~ 130 行，它的實現也比較簡單，就是將父模塊_children屬性的子模塊查找出來並return出去：

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

2.2.4 Module.prototype.forEachChild方法

forEachChild方法定義在VUEX源碼的145 ~ 147 行，它接受一個函數做爲參數，而且將該函數應用在Module實例的_children屬性上，也就是說會應用在全部的子模塊上：

Module.prototype.forEachChild = function forEachChild (fn) {
  forEachValue(this._children, fn);
};

能夠看到forEachChild 方法其實是調用了另一個輔助函數forEachValue，這個函數接收Module實例的_children屬性以及forEachChild 方法的fn參數做爲參數。它其實是遍歷_children對象，並將value和key做爲fn的參執行fn。它定義在VUEX源碼的87 ~ 92 行，咱們來看看它的實現：

/**
 * forEach for object
 */
function forEachValue (obj, fn) {
  Object.keys(obj).forEach(function (key) { return fn(obj[key], key); });
}

2.2.5 Module.prototype.update方法

update方法定義在VUEX源碼的132 ~ 143 行，它接收一個模塊，而後用該模塊更新當前Module實例上的_rawModule屬性。更新的內容包括_rawModule的namespaced、actions、mutations、getters：

Module.prototype.update = function update (rawModule) {
  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;
  }
};

2.2.6 Module.prototype.forEachGetter方法

forEachGetter方法定義在VUEX源碼的149 ~ 153 行，同forEachChild方法原理相似，forEachGetter方法接受一個函數做爲參數，而且將該函數應用在Module實例的_rawModule屬性的getters上，也就是說會應用在該模塊的全部getters上：

Module.prototype.forEachGetter = function forEachGetter (fn) {
  if (this._rawModule.getters) {
    forEachValue(this._rawModule.getters, fn);
  }
};

能夠看到forEachGetter 方法其實是也調用了另一個輔助函數forEachValue，這個forEachValue函數前面已經介紹過，這裏就再也不贅述。

2.2.7 Module.prototype.forEachAction方法

forEachAction方法定義在VUEX源碼的155 ~ 159 行，同forEachChild、forEachGetter 方法原理相似，forEachAction方法接受一個函數做爲參數，而且將該函數應用在Module實例的_rawModule屬性的actions上，也就是說會應用在該模塊的全部actions上：

Module.prototype.forEachAction = function forEachAction (fn) {
  if (this._rawModule.actions) {
    forEachValue(this._rawModule.actions, fn);
  }
};

2.2.8 Module.prototype.forEachMutation方法

forEachMutation方法定義在VUEX源碼的161 ~ 165 行，同forEachChild、forEachGetter、 forEachGetter 方法原理相似，forEachMutation方法接受一個函數做爲參數，而且將該函數應用在Module實例的_rawModule屬性的mutations上，也就是說會應用在該模塊的全部mutations上：

Module.prototype.forEachMutation = function forEachMutation (fn) {
  if (this._rawModule.mutations) {
    forEachValue(this._rawModule.mutations, fn);
  }
};

因爲forEachChild、forEachGetter、 forEachGetter、forEachMutation方法相似，因此咱們這裏僅以forEachMutation方法舉一個例子，說明它及其實際執行者forEachValue的工做原理：

var options = {
    state() {
        return {
            count: 0,
            todos: [
              { id: 1, text: '...', done: true },
              { id: 2, text: '...', done: false }
            ]
        }
    },
    mutations: {
        increment (state) {
          state.count++
        },
        increment1 (state) {
          state.count++
        }
    }
}
var moduleIns = new Module(options)
moduleIns.forEachMutation(function (value, key) {
    console.log(`mutations key is : ${key}`)
    console.log(`mutations value is : ${value}`)
})

這裏咱們只是爲了描述其原理，因此上述例子僅僅只是輸出了motations的key和value，實際的使用場合會比這複雜的多，咱們來看看上述例子的輸出結果：

mutations key is : increment
mutations value is : increment(state) {
  state.count++
}
mutations key is : increment1
mutations value is : increment1(state) {
  state.count++
}

第三章 ModuleCollection類

ModuleCollection類定義在VUEX源碼的169 ~ 251 行，咱們來具體看看它的內容。

3.1 成員屬性

Module類的成員屬性只有1個：

  1. root。掛載着根模塊。

它並非直接在構造函數中顯示定義的，而是在原型函數register中定義的。經過在構造函數中調用register函數從而在成員屬性root上掛載根模塊。其實如今VUEX源碼的192 ~ 214 行：

ModuleCollection.prototype.register = function register (path, rawModule, runtime) {
    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);
    });
  }
};

3.2 原型函數

3.2.1 ModuleCollection.prototype.get方法

get方法定義在VUEX源碼的174 ~ 178 行，get方法主要是根據給定的模塊名（模塊路徑），從根store開始，逐級向下查找對應的模塊找到最終的那個模塊，它的核心是採用的reduce函數來實現的，咱們來看看它的源碼：

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

3.2.2 ModuleCollection.prototype.getNamespace方法

getNamespace方法定義在VUEX源碼的180 ~ 186 行，getNamespace方法一樣是根據給定的模塊名（模塊路徑），從根store開始，逐級向下生成該模塊的命名空間，當途中所遇到的模塊沒有設置namespaced屬性的時候，其命名空間默認爲空字符串，而若是設置了namespaced屬性，則其命名空間是模塊名+反斜線(/)拼接起來的字符。咱們來看看它的源碼實現：

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 + '/' : '')
  }, '')
};

3.2.3 ModuleCollection.prototype.update方法

update方法定義在VUEX源碼的188 ~ 190 行，用於從根級別開始逐級更新模塊的內容：

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

它實際調用的是定義在VUEX源碼224 ~ 251 行的全局update方法：

function update (path, targetModule, newModule) {
  {
    assertRawModule(path, newModule);
  }

  // update target module
  targetModule.update(newModule);

  // update nested modules
  if (newModule.modules) {
    for (var key in newModule.modules) {
      if (!targetModule.getChild(key)) {
        {
          console.warn(
            "[vuex] trying to add a new module '" + key + "' on hot reloading, " +
            'manual reload is needed'
          );
        }
        return
      }
      update(
        path.concat(key),
        targetModule.getChild(key),
        newModule.modules[key]
      );
    }
  }
}

這個方法會調用指定模塊（第二個參數）的update方法，咱們在第二章介紹過，每一個Module實例都有一個update原型方法，定義在132 ~ 143行，這裏再一次粘貼以下：

Module.prototype.update = function update (rawModule) {
  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;
  }
};

回到全局update方法，當判斷出它還有子模塊的時候，則會遞歸地調用update方法進行模塊更新對應子模塊。

3.2.4 ModuleCollection.prototype.register方法

register方法定義在VUEX源碼的192 ~ 214 行，它主要是從根級別開始，逐級註冊子模塊，最終的模塊鏈條會掛載在ModuleCollection實例的成員屬性root上，咱們來看看它的源碼：

ModuleCollection.prototype.register = function register (path, rawModule, runtime) {
    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);
    });
  }
};

咱們來過一遍該代碼，這段代碼首先保存了this副本：

var this$1 = this;

而後會判斷runtime參數是否傳遞，若是沒有傳遞，則會給它默認設置爲ture：

if ( runtime === void 0 ) runtime = true;
{
  assertRawModule(path, rawModule);
}

這裏有一個小知識點是採用void 0 判斷undfined，這是一種很好的方法，具體緣由能夠參考本人的這篇文章「JavaScrip中如何正確並優雅地判斷undefined」。接下來會實例化一個Module，對於根Module而言，它會被掛載到ModuleCollection實例的root成員屬性上，而對於子模塊，它會找到它的父模塊，而後掛載到父模塊的_children屬性上，由Module類咱們知道，每個模塊都會有一個_children屬性，用於存儲它的子模塊：

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函數用來執行前面幾個步驟：

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

那麼register函數是在哪裏調用的呢？它是在VUEX源碼169 ~ 172行ModuleCollection的構造函數中調用的，咱們來看看：

var ModuleCollection = function ModuleCollection (rawRootModule) {
  // register root module (Vuex.Store options)
  this.register([], rawRootModule, false);
};

咱們能夠經過一個例子來直觀地看一看：

const moduleC = {
  namespaced: true,
  state: { count: 1, age1: 20 },
  mutations: {
    increment (state) {
      // 這裏的 `state` 對象是模塊的局部狀態
      state.count++
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}
const moduleA = {
  namespaced: true,
  state: { count: 1, age1: 20 },
  mutations: {
    increment (state) {
      // 這裏的 `state` 對象是模塊的局部狀態
      state.count++
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  },
  modules: {
    c: moduleC
  }
}
const moduleB = {
  namespaced: true,
  state: { count: 1, age1: 20 },
  mutations: {
    increment (state) {
      // 這裏的 `state` 對象是模塊的局部狀態
      state.count++
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}
var options = {
  state() {
    return {
        count: 0,
        todos: [
          { id: 1, text: '...', done: true },
          { id: 2, text: '...', done: false }
        ]
    }
  },
  mutations: {
    increment (state) {
      state.count++
    },
    increment1 (state) {
      state.count++
    }
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  },
  modules: {
    a: moduleA,
    b: moduleB
  }
}
var moduleCollectionIns = new ModuleCollection(options)
console.log(moduleCollectionIns)

輸出結果：

圖片描述

3.2.5 ModuleCollection.prototype.unregister方法

unrigister方法定義在VUEX源碼的216 ~ 222 行，它用於取消註冊某個模塊：

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

當取消註冊某個模塊時須要先拿到該模塊的父模塊，而後在父模塊的_children對象中刪除該模塊，調用的是父模塊的removeChild方法。這裏面會判斷待取消模塊是否處於運行時（runtime），當不處於運行時（runtime）時能夠取消註冊。

第四章 Store類

Store類定義在VUEX源碼的294 ~ 775 行，是VUEX中最後定義的、最重要的類，也是咱們實際上最後使用的類。咱們來具體看看它的內容。

4.1 成員屬性和成員函數

Store類的成員屬性主要有下面幾個：

  1. _committing。標識是否正提交。類型Boolean.
  2. _actions。儲存actions。類型Object。
  3. _actionSubscribers。存儲actions的訂閱者。類型Array。
  4. _mutations。存儲mutations。類型Object。
  5. _wrappedGetters。存儲wrapped後的Getters。類型Object。
  6. _modules。存儲模塊鏈。是一個ModuleCollection實例。
  7. _modulesNamespaceMap。存儲帶命名空間的modules。類型Object。
  8. _subscribers。存儲訂閱者。類型Object。
  9. _watcherVM。存儲Vue實例。
  10. strict。標識是否strict模式。類型Boolean。

其源碼定義在296 ~ 362 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);
  }

  {
    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;

  var state = options.state; if ( state === void 0 ) state = {};
  if (typeof state === 'function') {
    state = state() || {};
  }

  // 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;

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

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

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

該類會首先檢查咱們在聲明Store實例的時候有沒有傳遞options參數，若是沒有則會初始化爲空對象{}。而後會檢查Vue有沒有定義，若是Vue沒有定義，而且window上已經有掛載Vue，那麼會安裝Vue，不然告警：

// 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.");
}

這段代碼能夠確保Vue被且僅被一次安裝。Vue是全局聲明在VUEX源碼中的294行：

var Vue; // bind on install

而若是咱們在頁面使用了Vue（不論是腳本引入<script src="./vue.js"></script>仍是node引入模式），在window上都會掛載一個Vue：

圖片描述

而安裝Vue的install方法定義在VUEX源碼的777 ~ 788行，主要就是給全局聲明的Vue賦值，而後調用了applyMixin執行混入：

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

applyMixin定義在VUEX源碼的12 ~ 29行，它的主要目的是確保在Vue的beforeCreate鉤子函數中調用vuexInit函數，固然更具Vue版本差別實現方法也有差別，由於咱們主要針對>2的版本，因此這裏只看版本>2時的狀況：

var applyMixin = function (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;
    }
  }
};

在該函數內部定義了vuexInit函數，該函數的主要做用是在Vue的實例上掛載$store：

圖片描述

回過頭來繼續看Store構造函數，在執行完install以後，它會對構造函數的options參數進行檢查，當不合法時會給出默認值：

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

var state = options.state; if ( state === void 0 ) state = {};
if (typeof state === 'function') {
  state = state() || {};
}

這裏面有兩點須要注意：

  1. 判斷undefiend採用的是void 0形式判斷，這是一種很是好的判斷方式。
  2. state屬性並不必定須要是個對象，它也能夠是產生對象的工廠函數。這個咱們在第二章Module類中已經分析過。

接下來就是成員屬性的定義：

// 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();

再接下來就是成員函數dispatch和commit的定義，這個咱們在下一節詳細講述。

接下來會執行installModule函數：

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

英文的註釋已經描述的很詳細了，installModule會初始化根模塊，並遞歸地註冊子模塊，收集全部模塊的Getters放在_wrappedGetters屬性中。installModule是一個全局函數，定義在VUEX源碼的577 ~ 617 行：

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

  // register in namespace map
  if (module.namespaced) {
    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 () {
      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);
  });
}

代碼開始會判斷是不是根模塊，而且會獲取模塊對應的命名空間，若是該模塊有namespace屬性，則在_modulesNamespaceMap屬性上以命名空間爲key保存該模塊：

var isRoot = !path.length;
var namespace = store._modules.getNamespace(path);

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

下面這個貌似意思是將該模塊的state以命名空間爲key掛載父模塊的state上，造成state鏈，這個過程是爲了後面使用getNestedState函數查找對應命名空間的state：

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

咱們來看一個根store上掛載namespaced的a模塊，a模塊又掛載namespaced的c模塊的例子，此時根store的state長這樣：

圖片描述

回過頭來看installModule，接下來是拿到本地的上下文：

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

本地上下文是什麼意思呢？意思就是說，dispatch, commit, state, getters都是局部化了。咱們知道store的模塊是有命名空間的概念的，要想操做某一層級的東西，都是須要用命名空間去指定的。若是不使用命名空間，操做的是根級別的。因此本地上下文是指的就是某個模塊的上下文，當你操做dispatch, commit, state, getters等的時候，你實際上直接操做的某個模塊。

這個看似複雜的東西是如何實現的呢？其實它只不過是個語法糖，它內部也是經過逐級查找，找到對應的模塊完成的。咱們來看看這個makeLocalContext的實現，它定義在VUEX源碼的618 ~ 675 行：

/**
 * make localized dispatch, commit, getters and state
 * if there is no namespace, just use root ones
 */
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 ("development" !== '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 ("development" !== '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
}

該函接受根級別的store、命名空間、模塊路徑做爲參數，而後聲明一個local對象，分別局部化dispatch, commit, getters , state。咱們來分別看一下：

局部化dispatch:

dispatch局部化時，首先判斷有沒有命名空間，若是沒有則直接使用根級別的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 ("development" !== 'production' && !store._actions[type]) {
      console.error(("[vuex] unknown local action type: " + (args.type) + ", global type: " + type));
      return
    }
  }

  return store.dispatch(type, payload)
}

從新定義其實只不過是規範化參數，將參數映射到指定命名空間的模塊上，是調用unifyObjectStyle來完成的，它定義在VUEX源碼的763 ~ 775 行，咱們來看看它的實現：

function unifyObjectStyle (type, payload, options) {
  if (isObject(type) && type.type) {
    options = payload;
    payload = type;
    type = type.type;
  }

  {
    assert(typeof type === 'string', ("Expects string as the type, but found " + (typeof type) + "."));
  }

  return { type: type, payload: payload, options: options }
}

規範化參數實際上是和官方文檔關於dispatch的描述是呼應的，咱們引用一下官方的表述：

Actions 支持一樣的載荷方式和對象方式進行分發：

// 以載荷形式分發
store.dispatch('incrementAsync', {
  amount: 10
})

// 以對象形式分發
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

能夠看出unifyObjectStyle只不過是把載荷形式的分發轉換成了對象形式的分發，這種狀況下的options實際上是undefined。

回過頭來繼續看dispatch的局部化過程。當規範化參數會分別拿到規範化的參數，而後對於非根級別，則給type加上命名空間：

var payload = args.payload;
var options = args.options;
var type = args.type;

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

最後仍是調用根級別的dispatch來完成分發：

return store.dispatch(type, payload)

局部化commit:

commit的局部化以下：

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 ("development" !== 'production' && !store._mutations[type]) {
        console.error(("[vuex] unknown local mutation type: " + (args.type) + ", global type: " + type));
        return
      }
    }

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

整個過程和dispatch的局部化過程幾乎如出一轍，這裏咱們就再也不贅述。

局部化Getters:

Getters的局部化時在前述的local對象上定義getters屬性，並從新定義該屬性的get函數：

getters: {
  get: noNamespace
    ? function () { return store.getters; }
    : function () { return makeLocalGetters(store, namespace); }
},

其主要思路就是：沒有命名空間的時候直接拿根級別的getters，有命名空間的時候拿對應模塊上的getters。這其中用到了makeLocalGetters函數，它定義在VUEX源碼的677 ~ 698 行，咱們來看看它的實現：

function makeLocalGetters (store, namespace) {
  var gettersProxy = {};

  var splitPos = namespace.length;
  Object.keys(store.getters).forEach(function (type) {
    // skip if the target getter is not match this namespace
    if (type.slice(0, splitPos) !== namespace) { return }

    // extract local getter type
    var localType = type.slice(splitPos);

    // Add a port to the getters proxy.
    // Define as getter property because
    // we do not want to evaluate the getters in this time.
    Object.defineProperty(gettersProxy, localType, {
      get: function () { return store.getters[type]; },
      enumerable: true
    });
  });

  return gettersProxy
}

咱們只須要遍歷根級別store的getters屬性，找到對應的命名空間，而後代理對它的訪問就能夠了。咱們能夠先來看一個例子以及根級別上getters的內容，相信對理解上述代碼會更用幫助：

const moduleC = {
  namespaced: true,
  state: { count: 1, age1: 20 },
  mutations: {
    increment (state) {
      // 這裏的 `state` 對象是模塊的局部狀態
      state.count++
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}
const moduleA = {
  namespaced: true,
  state: { count: 1, age1: 20 },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  },
  modules: {
    c: moduleC
  }
}
const moduleB = {
  namespaced: true,
  state: { count: 1, age1: 20 },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}
const store = new Vuex.Store({
  state() {
    return {
        count: 0,
        todos: [
          { id: 1, text: '...', done: true },
          { id: 2, text: '...', done: false }
        ]
    }
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  },
  modules: {
    a: moduleA,
    b: moduleB
  }
})
var vm = new Vue({
  el: '#example',
  data: {
    age: 10
  },
  store,
  mounted() {
    console.log(this.count)
    this.localeincrement('hehe')
    console.log(this.count)
  },
  // computed: Vuex.mapState('a', [
  //     'count', 'age1'
  //   ]
  // ),
  computed: Vuex.mapState([
      'count'
    ]
  ),
  methods: {
    ...Vuex.mapMutations({
      add: 'increment' // 將 `this.add()` 映射爲 `this.$store.commit('increment')`
    }),
    ...Vuex.mapMutations({
      localeincrement (commit, args) {
        console.log(commit)
        console.log(args)
        commit('increment', args)
      }
    })
  }
})
console.log(vm)

對應的根級別的getters:

圖片描述

局部化state:

state的局部化時在前述的local對象上定義state屬性，並從新定義該屬性的get函數：

state: {
    get: function () { return getNestedState(store.state, path); }
}

它會調用getNestedState方法由根實例的state向下查找對應命名空間的state, getNestedState定義在VUEX源碼的757 ~ 761 行：

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

以上面的例子爲例，咱們來看一下a模塊和c模塊的state關係就知道了：

圖片描述

全部的局部化完成以後會將該local對象返回，掛載在根模塊的context屬性上：

return local

咱們來看看例子：

圖片描述

回過頭來繼續看installModule函數的執行，它會分別遍歷mutaions, actions, getters，並分別執行registerMutation，registerAction，registerGetter：

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

咱們來分別看一下：

註冊Mutation:

註冊mutaion首先會調用forEachMutation進行遍歷：

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

forEachMutation的實如今VUEX源碼的161 ~ 165行：

Module.prototype.forEachMutation = function forEachMutation (fn) {
  if (this._rawModule.mutations) {
    forEachValue(this._rawModule.mutations, fn);
  }
};

forEachValue的實現咱們在前面講過，實際上就是遍歷對象的key，將value，key做爲參數應用於fn。而對於forEachAction而言，它的fn就是：

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

這裏的核心仍是歸結到使用命名空間註冊action了，它實際調用的是registerAction，該函數定義在VUEX源碼的700 ~ 705 行：

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

實際上，它是在根store的_mutaions上以命名空間爲key，註冊對應的mutaion。稍後咱們會有實際例子展現。

註冊Action:

同註冊Mutation原理如出一轍，註冊action首先會調用forEachAction進行遍歷：

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

forEachAction的實如今VUEX源碼的155 ~ 159行：

Module.prototype.forEachAction = function forEachAction (fn) {
  if (this._rawModule.actions) {
    forEachValue(this._rawModule.actions, fn);
  }
};

forEachValue的實現咱們在前面講過，實際上就是遍歷對象的key，將value，key做爲參數應用於fn。而對於forEachMutation而言，它的fn就是：

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

這裏的核心仍是歸結到使用命名空間註冊mutation了，它實際調用的是registerMutation，該函數定義在VUEX源碼的707 ~ 730 行：

function registerAction (store, type, handler, local) {
  var entry = store._actions[type] || (store._actions[type] = []);
  entry.push(function wrappedActionHandler (payload, cb) {
    var res = handler.call(store, {
      dispatch: local.dispatch,
      commit: local.commit,
      getters: local.getters,
      state: local.state,
      rootGetters: store.getters,
      rootState: store.state
    }, payload, cb);
    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
    }
  });
}

實際上，它是在根store的_actions上以命名空間爲key，註冊對應的action。可是action比mutaion複雜，主要體如今：

  1. 在分發action時能夠提供一個callback。
  2. 在實際action的執行時，action的handle的參數會更復雜。

對於第二點，從代碼中，咱們能夠看出，action實際上的會暴露四個參數：

  1. 根級別的store。
  2. 局部化的以及根級別的一些內容。這其中包括局部化的dispatch、commit、getters、state，根級別的getters、state。
  3. 分發action時的載荷。
  4. 分發action時的callback。

action和mutations的最大區別還在於，action是支持異步的。這在上述代碼也有體現。

稍後咱們會有實際例子展現註冊action的效果。

註冊Getters:

同註冊Mutation、Action原理相似，註冊getters首先會調用forEachGetter進行遍歷：

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

forEachGetter的實如今VUEX源碼的149 ~ 153行：

Module.prototype.forEachGetter = function forEachGetter (fn) {
  if (this._rawModule.getters) {
    forEachValue(this._rawModule.getters, fn);
  }
};

forEachValue的實現咱們在前面講過，實際上就是遍歷對象的key，將value，key做爲參數應用於fn。而對於forEachGetter而言，它的fn就是：

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

這裏的核心仍是歸結到使用命名空間註冊getters了，它實際調用的是registerGetter，該函數定義在VUEX源碼的732 ~ 747 行：

function registerGetter (store, type, rawGetter, local) {
  if (store._wrappedGetters[type]) {
    {
      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
    )
  };
}

實際上，它是在根store的_wrappedGetters上以命名空間爲key，註冊對應的getters。它其實是對getters對應的handle參數作了處理，暴露出四個參數：局部化的state、局部化的getters、根級別的state、根級別的getters。

以上Mutation、Action、Getters的註冊能夠經過下面這個例子來加深理解：

const moduleC = {
  namespaced: true,
  state: { count: 1, age1: 20 },
  mutations: {
    increment (state) {
      // 這裏的 `state` 對象是模塊的局部狀態
      state.count++
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}
const moduleA = {
  namespaced: true,
  state: { count: 1, age1: 20 },
  mutations: {
    increment (state) {
      // 這裏的 `state` 對象是模塊的局部狀態
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  },
  modules: {
    c: moduleC
  }
}
const moduleB = {
  namespaced: true,
  state: { count: 1, age1: 20 },
  mutations: {
    increment (state) {
      // 這裏的 `state` 對象是模塊的局部狀態
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

const store = new Vuex.Store({
  state() {
    return {
        count: 0,
        todos: [
          { id: 1, text: '...', done: true },
          { id: 2, text: '...', done: false }
        ]
    }
  },
  mutations: {
    increment (state) {
      state.count++
    },
    increment1 (state) {
      state.count++
    }
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  },
  modules: {
    a: moduleA,
    b: moduleB
  }
})
var vm = new Vue({
  el: '#example',
  data: {
    age: 10
  },
  store,
  mounted() {
    console.log(this.count)
    this.localeincrement('hehe')
    console.log(this.count)
  },
  // computed: Vuex.mapState('a', [
  //     'count', 'age1'
  //   ]
  // ),
  computed: Vuex.mapState([
      'count'
    ]
  ),
  methods: {
    ...Vuex.mapMutations({
      add: 'increment' // 將 `this.add()` 映射爲 `this.$store.commit('increment')`
    }),
    ...Vuex.mapMutations({
      localeincrement (commit, args) {
        console.log(commit)
        console.log(args)
        commit('increment', args)
      }
    })
  }
})
console.log(vm)

分別看看註冊的結果：

圖片描述

圖片描述

圖片描述

回過頭來繼續看installModule的執行，它會遍歷該模塊的子模塊，遞歸調用installModule來完成上述註冊:

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

而forEachChild定義在VUEX源碼的145 ~ 147 行：

Module.prototype.forEachChild = function forEachChild (fn) {
  forEachValue(this._children, fn);
};

至此，installModule的執行就jies 了，咱們回過頭繼續看看Store類的構造函數執行，接下來執行的是resetStoreVM函數，它定義在VUEX源碼的531 ~ 575 行：

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

  // bind store public getters
  store.getters = {};
  var wrappedGetters = store._wrappedGetters;
  var computed = {};
  forEachValue(wrappedGetters, function (fn, key) {
    // use computed to leverage its lazy-caching mechanism
    computed[key] = function () { return 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(); });
  }
}

它實際上主要作的是在store的實例上定義vm屬性，而vm上掛載的是一個新的Vue實例，這個vue實例的data爲store的state，而computed爲store的getters，咱們一樣之前面的那個例子，看看效果：

圖片描述

Store構造函數的最後是和插件、調試工具備關的幾行代碼，這裏再也不細述：

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

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

4.2 原型函數

4.2.1 Store.prototype.commit

commit定義在VUEX源碼的376 ~ 409行：

Store.prototype.commit = function commit (_type, _payload, _options) {
    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 (
    "development" !== 'production' &&
    options && options.silent
  ) {
    console.warn(
      "[vuex] mutation type: " + type + ". Silent option has been removed. " +
      'Use the filter functionality in the vue-devtools'
    );
  }
};

它所作的就是當mutation被提交時執行對應的函數，而且還會執行訂閱列表裏面的回調函數。

4.2.2 Store.prototype.dispatch

dispatch定義在VUEX源碼的411 ~ 433 行，它的原理和commit基本上同樣的,也是在分發action時執行對應的函數，而且執行訂閱action的列表，所不一樣的是action是支持異步的：

Store.prototype.dispatch = function dispatch (_type, _payload) {
    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
  }

  this._actionSubscribers.forEach(function (sub) { return sub(action, this$1.state); });

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

4.2.3 Store.prototype.subscribe

subscribe定義在VUEX源碼的435 ~ 437行，用於註冊訂閱mutation的回調：

Store.prototype.subscribe = function subscribe (fn) {
  return genericSubscribe(fn, this._subscribers)
};

官方描述以下：

註冊監聽 store 的 mutation。handler 會在每一個 mutation 完成後調用，接收 mutation 和通過 mutation 後的狀態做爲參數：

store.subscribe((mutation, state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})

一般用於插件。

它實際上調用的是定義在VUEX源碼507 ~ 517行的genericSubscribe函數：

function genericSubscribe (fn, subs) {
  if (subs.indexOf(fn) < 0) {
    subs.push(fn);
  }
  return function () {
    var i = subs.indexOf(fn);
    if (i > -1) {
      subs.splice(i, 1);
    }
  }
}

它實際上就是訂閱mutation，並將回調放入_subscribers訂閱列表中，它會返回一個函數，用於解除訂閱。這個主要用在調試工具裏。

4.2.4 Store.prototype.subscribeAction

subscribeAction定義在VUEX源碼的439 ~ 441行，用於註冊訂閱action的回調，它和subscribe函數的原理是如出一轍的：

Store.prototype.subscribeAction = function subscribeAction (fn) {
  return genericSubscribe(fn, this._actionSubscribers)
};

它實際上也調用的是定義在VUEX源碼507 ~ 517行的genericSubscribe函數,這個在前面已經講過了。它實際上就是訂閱action，並將回調放入_actionSubscribers訂閱列表中，它會返回一個函數，用於解除訂閱。這個也主要用在調試工具裏。

4.2.5 Store.prototype.watch

watch定義在VUEX源碼的433 ~ 450行：

Store.prototype.watch = function watch (getter, cb, options) {
    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)
};

咱們來直接看看官方文檔對它的解釋吧：

響應式地監測一個 getter 方法的返回值，當值改變時調用回調函數。getter 接收 store 的狀態做爲惟一參數。接收一個可選的對象參數表示 Vue 的 vm.$watch 方法的參數。
要中止監測，直接調用返回的處理函數。

4.2.6 Store.prototype.replaceState

replcaeState定義在VUEX源碼的452 ~ 489行，用於替換_vm屬性上存儲的狀態：

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

  this._withCommit(function () {
    this$1._vm._data.$$state = state;
  });
};

4.2.7 Store.prototype.registerModule

registerModule定義在VUEX源碼的第460 ~ 474 行，使得Store實例可以在給定路徑註冊相應的模塊，實際上仍是從根模塊開始，找到對應的路徑，而後註冊。註冊完成後須要從新安裝模塊，而後重置_vm屬性：

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

4.2.8 Store.prototype.unregisterModule

unregisterModule定義在VUEX源碼的第476 ~ 491行，它使得Store實例能夠經過提供的path參數解除對應模塊的註冊。實際上它仍是根據path找到對應的模塊的父模塊，而後調用父模塊的unregister方法完成解綁：

Store.prototype.unregisterModule = function unregisterModule (path) {
    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);
};

4.2.9 Store.prototype.hotUpdate

hotUpdate定義在VUEX源碼的493 ~ 496行：

Store.prototype.hotUpdate = function hotUpdate (newOptions) {
  this._modules.update(newOptions);
  resetStore(this, true);
};

hotUpdate能夠熱更新整個模塊，跟新完後調用resetStore重置整個模塊，resetStore的定義在519 ~ 529行：

function resetStore (store, hot) {
  store._actions = Object.create(null);
  store._mutations = Object.create(null);
  store._wrappedGetters = Object.create(null);
  store._modulesNamespaceMap = Object.create(null);
  var state = store.state;
  // init all modules
  installModule(store, state, [], store._modules.root, true);
  // reset vm
  resetStoreVM(store, state, hot);
}

能夠看到基本上就是將構造函數推倒重來了一遍。

4.2.10 Store.prototype._withCommit

_withCommit定義在VUEX源碼的498 ~ 503行：

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

它首先設置當前store的committing狀態爲true，表示正在commit，而後執行對應的函數，當執行完畢後，重置commit狀態。

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