Vuex源碼學習（二）脈絡梳理

各位看官 沒看過功能梳理的能夠先閱讀下 Vuex源碼學習（一）功能梳理.

前車可鑑

有了vue-router源碼學習的經驗，每次看認真鑽研源代碼的時候都會抽出一小段時間來大致瀏覽一遍源代碼。大致瞭解這個源代碼的脈絡，每一個階段作了什麼，文件目錄的劃分。下面我來帶你們梳理一下Vuex的脈絡。

Vuex與vue-router結構的區別

Vuex的結構與vue-router結構的核心區別就在與Vuex有一大批的輔助函數須要提供、這個並不在應該Vuex這個類中，

因此Vuex的index.js只是一個出口文件，負責輸出Store、install、以及全部的輔助函數。而vue-router的index.js就是router的構造函數。

咱們看一下Vuex的index.js

只是一個簡單的輸出，回憶下咱們如何使用初始化Vuex

Vue.use(Vuex)

export default new Vuex.Store(
  {
    state : ...,
    modules : ...
  }
)


main.js
// 引入vuex實例
import store from './store'
new Vue(
  {
    store
  }
)
複製代碼

這能夠看出來Vuex的核心類（Store）就在store.js這個文件中，

接下來看一下store.js中這個核心的類Store，

這一期只是單純的梳理脈絡，因此只是看一下Store的constrctor函數

new Store的過程首先要聲明一些空間用於存儲mutation、action、getters等，而後關鍵代碼

生成模塊與模塊連接

完成模塊之間的連接。咱們要把Vuex組織成一個樹形結構，若是須要的話（有module）
this._modules = new ModuleCollection(options);
複製代碼

_modules會放置被組織好的模塊們，如何組織的咱們會在模塊與模塊連接的章節詳細解釋，這隻須要知道，Vuex初始化的時候很早的就把模塊組織連接好了。

bind dispatch與commit方法

而後對dispacth和commit方法進行了設置

把這兩個函數的this執行綁定在store實例上，
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)
}
複製代碼

installModule 根據根模塊的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)
複製代碼

在模塊連接完畢以後能夠拿到一個state，這個就是通過模塊連接以後的根結點的state。 而後用根結點state和根結點模塊，來初始化根結點以及遞歸的註冊全部模塊。

重置VM對象

//重置storeVM
resetStoreVM(this, state)
複製代碼

重置一下store的vm對象，這塊也是一個核心的點，會在之後章節講述vm對象的用處以及resetStoreVM函數的做用。

註冊插件

最後Vuex支持各類插件

註冊一下插件。

上個圖吧：

這就是Vuex最核心的Store構造函數的基本脈絡，如下的章節就要一點一點的去剖析每一步了，進度變緩、難度加大。你們坐穩扶好。

下一章講述install的時候作了哪些事情