Vuex原始碼學習(二)脈絡梳理

酸楚與甘甜發表於2019-03-23

各位看官 沒看過功能梳理的可以先閱讀下 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原始碼學習(二)脈絡梳理
只是一個簡單的輸出,回憶下我們如何使用初始化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函式

Vuex原始碼學習(二)脈絡梳理

Vuex原始碼學習(二)脈絡梳理

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原始碼學習(二)脈絡梳理
註冊一下外掛。

上個圖吧:

Vuex原始碼學習(二)脈絡梳理

這就是Vuex最核心的Store建構函式的基本脈絡,以下的章節就要一點一點的去剖析每一步了,進度變緩、難度加大。大家坐穩扶好。

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

個人公眾號:鹹魚正翻身

相關文章