Vuex源碼學習（五）加工后的module

2bdenny 發布于2019-08-23 16:28 / 1855人閱讀

摘要：先看一下創建一個容器存放該模塊所有的子模塊存放自己未被加工的模塊內容。是封裝的工具方法，用于遍歷對象的。這些方便高效的方法為之后的注冊。

沒有看過moduleCollection那可不行！Vuex源碼學習（四）module與moduleCollection

代碼塊和截圖的區別

代碼塊部分希望大家按照我的引導一行行認真的讀

代碼的截圖是希望大家能記住圖中的結構與方法，下面會對整體進行一個分析，而不會一行一行的分析。

但是以后的文章會更偏向于使用代碼塊，希望大家喜歡。

上一章我們講述了ModuleCollection類的作用，幫助我們把偽（未加工的）模塊變成真正的模塊，然后把每個模塊按照父子與兄弟關系鏈接起來。那么真正的模塊相比于偽（未加工的）模塊多了哪些能力呢？

module提供的方法

這是module暴露出來的所有方法，以及一個屬性。

先看一下constructor

constructor (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
    const rawState = rawModule.state
    // Store the origin module‘s state
    // 創建這個模塊的數據容器
    this.state = (typeof rawState === "function" ? rawState() rawState) || {}
}

模塊的初始化主要是做了以下三件事情

創建_children屬性用于存放子模塊

創建_rawModule屬性存儲自己模塊的偽（未被加工）模塊時的內容

創建state屬性存儲自己模塊的數據內容每個模塊都有自己的state。

模塊的初始化并沒有做什么事情，模塊提供的方法和屬性才是它的核心，
模塊提供了一個namespaced的屬性，以及很多方法，我將模塊提供的方法分成兩類。

先說屬性

get namespaced () {
    // 獲取模塊的namespaced屬性 確定這個模塊有沒有自己的命名空間
    return !!this._rawModule.namespaced
}

判斷是否有命名空間有什么用？在以后設置getters、mutation、actions時有很大作用，以后再講。

再說方法

模塊提供的所有方法都是為了給外部的調用，這些方法沒有一個是讓模塊在自己的內部使用的。所以我把方法劃分的緯度是，按照這個方法是用于構建模塊樹還是用于抽取模塊中的內容，

構建模塊樹的方法:

1.addChild：給模塊添加子模塊。

addChild (key, module) {
    this._children[key] = module
}

這個方法實現上很簡單，它是在哪里被調用的呢？大家可以翻開上一章的moduleCollection的內容，在ModuleCollection中完成模塊之間的鏈接，就是使用這個方法給父模塊添加子模塊。

removeChild：移除子模塊 Vuex初始化的時候未使用，但可以給你提供靈活的處理模塊的能力

removeChild (key) {
    delete this._children[key]
}

getChild：獲取子模塊獲取子模塊的意義是什么？在以后配置模塊的名字時，需要獲取模塊的是否設置了命名空間，獲取命名空間的屬性模塊提供了，再提供一個獲取子模塊就都Ok了

getChild (key) {
    return this._children[key]
}

updateChild:更新模塊的_ra wModule屬性（更新模塊的未加工前的模塊內容）,Vuex中未使用

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

Vuex在鏈接與整合模塊的時候使用了其中兩個方法，addChild、getChild。類ModuleCollection在鏈接時需要找到模塊（getChild）然后給模塊添加子模塊（addChild）的功能，所以這兩個方法是在整合模塊時最重要的。

抽取模塊中的內容

上面的一組方法，是為了更好的完成模塊的鏈接，給散落的單一模塊整理成一個模塊樹可以提供便捷的封裝方法，下面要說的方法什么叫做抽取模塊中的內容？將這些方法暴露給外面可以方便的去獲取這個模塊內的一些內容來使用。

forEachValue是Vuex封裝的工具方法，用于遍歷對象的。

export function forEachValue (obj, fn) {
  Object.keys(obj).forEach(key => fn(obj[key], key))
}

這四個方法作用：

forEachChild ：遍歷模塊的子模塊

forEachGetter ：遍歷模塊中_rawModule.getters 這塊就應該知道 _rawModule的作用了，我把模塊未加工時會有getters屬性，存放這個模塊所有的getters方法（vuex的基本用法就不多講了），然后遍歷，

forEachMutation : 和forEachGetter類似，只是換成了遍歷mutations

forEachAction : 和forEachGetter類似，只是換成了遍歷actions

這四個方法就是遍歷這些內容，有意義嗎？

意義很大,目前_rawModule上這些getters、mutations、actions屬性并不會生效，只是單純的一個屬性，如何讓他們可以成為那種，被dispatch、commit使用的那種方法呢？先給大家一個小提示，mutations、actions都是要被注冊的，注冊之前總要獲取到這些內容，具體的實現方式后面的章節會詳細講述，

總結

加工后真正的module（我們稱由Module這個類實例化出來為真正的module）只是緩存了一些內容，并且給外界提供了一堆方便高效的方法。這些方便高效的方法為之后的注冊action、mutation。整合state都起了很關鍵的作用。所以說module這個小單元為下面的代碼提供了很大便利，
額外思考我們對一段內容需要頻繁的處理并且處理方式大同小異的時候，是不是可以像module一樣整理成一個對象，然后給外界提供一些方法。（有一種面向對象思想）

下一章講述action和mutation是如何調用的

我是一個應屆生，最近和朋友們維護了一個公眾號，內容是我們在從應屆生過渡到開發這一路所踩過的坑，已經我們一步步學習的記錄，如果感興趣的朋友可以關注一下，一同加油~

GPU云服務器云服務器 Vuex 深度學習五 vuex cdn webrtc學習五

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103061.html

vuex 2.0源碼解讀（一）

摘要：簡單點說，當你使用構造函數，它實際上做了這么幾件事，首先定義給實例定義一些內部屬性，之后就是綁定和的上下文對象永遠是實例上，之后根據傳入的充實內部狀態等等。函數執行的結果是返回一個對象，屬性名對應于傳入的對象或者數組元素。轉載請注明出處 https://segmentfault.com/a/11... vuex2.0 和 vuex1.x 相比，API改變的還是很多的，但基本思想沒什么...

luqiuwen 2019-08-20 11:32 評論0 收藏0
手挽手帶你學VUE：四檔 Vue-cli3 Vuex Vue-router

摘要：安裝過后到命令行執行檢查版本，如果彈出版本的話恭喜你安裝成功，我們開始進行下面的步驟了。全局安裝的包名稱由改成了。如果你已經全局安裝了舊版本的或，你需要先通過卸載它。中的非常類似于事件每個都有一個字符串的事件類型和一個回調函數。視頻教程由于思否不支持視頻外鏈，視頻請移步http://www.henrongyi.top 你能學到什么在這一期的學習進度中，我們會開始學習在我們工作開...

Sourcelink 2019-08-02 14:02 評論0 收藏0
手挽手帶你學VUE：四檔 Vue-cli3 Vuex Vue-router

摘要：安裝過后到命令行執行檢查版本，如果彈出版本的話恭喜你安裝成功，我們開始進行下面的步驟了。全局安裝的包名稱由改成了。如果你已經全局安裝了舊版本的或，你需要先通過卸載它。中的非常類似于事件每個都有一個字符串的事件類型和一個回調函數。視頻教程由于思否不支持視頻外鏈，視頻請移步http://www.henrongyi.top 你能學到什么在這一期的學習進度中，我們會開始學習在我們工作開...

AlphaWallet 2019-08-23 14:28 評論0 收藏0
深入學習Vuex

摘要：深入學習作為配合使用的數據狀態管理庫，針對解決兄弟組件或多層級組件共享數據狀態的痛點問題來說，非常好用。至此，構造函數部分已經過了一遍了。深入學習Vuex vuex作為配合vue使用的數據狀態管理庫，針對解決兄弟組件或多層級組件共享數據狀態的痛點問題來說，非常好用。本文以使用者的角度，結合源碼來學習vuex。其中也參考了許多前輩的文章,參見最后的Reference Vue加載Vuex...

codercao 2019-08-22 18:28 評論0 收藏0