資訊專欄INFORMATION COLUMN
摘要：先看一下創(chuàng)建一個容器存放該模塊所有的子模塊存放自己未被加工的模塊內(nèi)容。是封裝的工具方法，用于遍歷對象的。這些方便高效的方法為之后的注冊。
沒有看過moduleCollection那可不行！Vuex源碼學(xué)習(xí)（四）module與moduleCollection
代碼塊和截圖的區(qū)別代碼塊部分希望大家按照我的引導(dǎo)一行行認(rèn)真的讀
代碼的截圖是希望大家能記住圖中的結(jié)構(gòu)與方法，下面會對整體進行一個分析，而不會一行一行的分析。
但是以后的文章會更偏向于使用代碼塊，希望大家喜歡。
上一章我們講述了ModuleCollection類的作用，幫助我們把偽（未加工的）模塊變成真正的模塊，然后把每個模塊按照父子與兄弟關(guān)系鏈接起來。那么真正的模塊相比于偽（未加工的）模塊多了哪些能力呢？
module提供的方法
這是module暴露出來的所有方法，以及一個屬性。
constructor (rawModule, runtime) {
this.runtime = runtime
// Store some children item
// 創(chuàng)建一個容器存放該模塊所有的子模塊
this._children = Object.create(null)
// Store the origin module object which passed by programmer
// 存放自己未被加工的模塊內(nèi)容。
this._rawModule = rawModule
const rawState = rawModule.state
// Store the origin module‘s state
// 創(chuàng)建這個模塊的數(shù)據(jù)容器
this.state = (typeof rawState === "function" ? rawState() rawState) || {}
}
模塊的初始化主要是做了以下三件事情
創(chuàng)建_children屬性用于存放子模塊
創(chuàng)建_rawModule屬性存儲自己模塊的偽（未被加工）模塊時的內(nèi)容
創(chuàng)建state屬性存儲自己模塊的數(shù)據(jù)內(nèi)容 每個模塊都有自己的state。
模塊的初始化并沒有做什么事情，模塊提供的方法和屬性才是它的核心，
模塊提供了一個namespaced的屬性，以及很多方法，我將模塊提供的方法分成兩類。
get namespaced () {
// 獲取模塊的namespaced屬性 確定這個模塊有沒有自己的命名空間
return !!this._rawModule.namespaced
}
判斷是否有命名空間有什么用？在以后設(shè)置getters、mutation、actions時有很大作用，以后再講。
再說方法模塊提供的所有方法都是為了給外部的調(diào)用，這些方法沒有一個是讓模塊在自己的內(nèi)部使用的。所以我把方法劃分的緯度是，按照這個方法是用于構(gòu)建模塊樹還是用于抽取模塊中的內(nèi)容，
構(gòu)建模塊樹的方法:
1.addChild：給模塊添加子模塊。
addChild (key, module) {
this._children[key] = module
}
這個方法實現(xiàn)上很簡單，它是在哪里被調(diào)用的呢？大家可以翻開上一章的moduleCollection的內(nèi)容，在ModuleCollection中完成模塊之間的鏈接，就是使用這個方法給父模塊添加子模塊。
removeChild：移除子模塊 Vuex初始化的時候未使用，但可以給你提供靈活的處理模塊的能力
removeChild (key) {
delete this._children[key]
}
getChild：獲取子模塊 獲取子模塊的意義是什么？在以后配置模塊的名字時，需要獲取模塊的是否設(shè)置了命名空間，獲取命名空間的屬性模塊提供了，再提供一個獲取子模塊就都Ok了
getChild (key) {
return this._children[key]
}
updateChild:更新模塊的_ra wModule屬性（更新模塊的未加工前的模塊內(nèi)容）,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）的功能，所以這兩個方法是在整合模塊時最重要的。
抽取模塊中的內(nèi)容上面的一組方法，是為了更好的完成模塊的鏈接，給散落的單一模塊整理成一個模塊樹可以提供便捷的封裝方法，下面要說的方法什么叫做抽取模塊中的內(nèi)容？將這些方法暴露給外面可以方便的去獲取這個模塊內(nèi)的一些內(nèi)容來使用。
forEachValue是Vuex封裝的工具方法，用于遍歷對象的。
export function forEachValue (obj, fn) {
Object.keys(obj).forEach(key => fn(obj[key], key))
}
這四個方法作用：
forEachChild ： 遍歷模塊的子模塊
forEachGetter ： 遍歷模塊中_rawModule.getters 這塊就應(yīng)該知道 _rawModule的作用了，我把模塊未加工時會有g(shù)etters屬性，存放這個模塊所有的getters方法（vuex的基本用法就不多講了），然后遍歷，
forEachMutation : 和forEachGetter類似，只是換成了遍歷mutations
forEachAction : 和forEachGetter類似，只是換成了遍歷actions
這四個方法就是遍歷這些內(nèi)容，有意義嗎？
意義很大,目前_rawModule上這些getters、mutations、actions屬性并不會生效，只是單純的一個屬性，如何讓他們可以成為那種，被dispatch、commit使用的那種方法呢？先給大家一個小提示，mutations、actions都是要被注冊的，注冊之前總要獲取到這些內(nèi)容，具體的實現(xiàn)方式后面的章節(jié)會詳細(xì)講述，
總結(jié)加工后真正的module（我們稱由Module這個類實例化出來為真正的module）只是緩存了一些內(nèi)容，并且給外界提供了一堆方便高效的方法。這些方便高效的方法為之后的注冊action、mutation。整合state都起了很關(guān)鍵的作用。所以說module這個小單元為下面的代碼提供了很大便利，
額外思考我們對一段內(nèi)容需要頻繁的處理并且處理方式大同小異的時候，是不是可以像module一樣整理成一個對象，然后給外界提供一些方法。（有一種面向?qū)ο笏枷耄?/p>
下一章講述action和mutation是如何調(diào)用的
我是一個應(yīng)屆生，最近和朋友們維護了一個公眾號，內(nèi)容是我們在從應(yīng)屆生過渡到開發(fā)這一路所踩過的坑，已經(jīng)我們一步步學(xué)習(xí)的記錄，如果感興趣的朋友可以關(guān)注一下，一同加油~文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103061.html
摘要：簡單點說，當(dāng)你使用構(gòu)造函數(shù)，它實際上做了這么幾件事，首先定義給實例定義一些內(nèi)部屬性，之后就是綁定和的上下文對象永遠是實例上，之后根據(jù)傳入的充實內(nèi)部狀態(tài)等等。函數(shù)執(zhí)行的結(jié)果是返回一個對象，屬性名對應(yīng)于傳入的對象或者數(shù)組元素。 轉(zhuǎn)載請注明出處 https://segmentfault.com/a/11... vuex2.0 和 vuex1.x 相比，API改變的還是很多的，但基本思想沒什么...
摘要：安裝過后到命令行執(zhí)行檢查版本，如果彈出版本的話恭喜你安裝成功，我們開始進行下面的步驟了。全局安裝的包名稱由改成了。如果你已經(jīng)全局安裝了舊版本的或，你需要先通過卸載它。中的非常類似于事件每個都有一個字符串的事件類型和一個回調(diào)函數(shù)。 視頻教程 由于思否不支持視頻外鏈，視頻請移步http://www.henrongyi.top 你能學(xué)到什么 在這一期的學(xué)習(xí)進度中，我們會開始學(xué)習(xí)在我們工作開...
摘要：安裝過后到命令行執(zhí)行檢查版本，如果彈出版本的話恭喜你安裝成功，我們開始進行下面的步驟了。全局安裝的包名稱由改成了。如果你已經(jīng)全局安裝了舊版本的或，你需要先通過卸載它。中的非常類似于事件每個都有一個字符串的事件類型和一個回調(diào)函數(shù)。 視頻教程 由于思否不支持視頻外鏈，視頻請移步http://www.henrongyi.top 你能學(xué)到什么 在這一期的學(xué)習(xí)進度中，我們會開始學(xué)習(xí)在我們工作開...
摘要：深入學(xué)習(xí)作為配合使用的數(shù)據(jù)狀態(tài)管理庫，針對解決兄弟組件或多層級組件共享數(shù)據(jù)狀態(tài)的痛點問題來說，非常好用。至此，構(gòu)造函數(shù)部分已經(jīng)過了一遍了。 深入學(xué)習(xí)Vuex vuex作為配合vue使用的數(shù)據(jù)狀態(tài)管理庫，針對解決兄弟組件或多層級組件共享數(shù)據(jù)狀態(tài)的痛點問題來說，非常好用。本文以使用者的角度，結(jié)合源碼來學(xué)習(xí)vuex。其中也參考了許多前輩的文章,參見最后的Reference Vue加載Vuex...
閱讀 2428·2021-11-25 09:43
閱讀 1259·2021-11-24 09:39
閱讀 760·2021-11-23 09:51
閱讀 2396·2021-09-07 10:18
閱讀 1888·2021-09-01 11:39
閱讀 2790·2019-08-30 15:52
閱讀 2604·2019-08-30 14:21
閱讀 2869·2019-08-29 16:57
