Vuex源碼學(xué)習(xí)（一）功能梳理

livem 發(fā)布于2019-08-23 16:11 / 2311人閱讀

摘要：我們通常稱之為狀態(tài)管理模式，用于解決組件間通信的以及多組件共享狀態(tài)等問(wèn)題。創(chuàng)建指定命名空間的輔助函數(shù)，總結(jié)的功能首先分為兩大類自己的實(shí)例使用為組件中使用便利而提供的輔助函數(shù)自己內(nèi)部對(duì)數(shù)據(jù)狀態(tài)有兩種功能修改數(shù)據(jù)狀態(tài)異步同步。

what is Vuex ?

這句話我想每個(gè)搜索過(guò)Vuex官網(wǎng)文檔的人都看到過(guò)，

在學(xué)習(xí)源碼前，當(dāng)然要有一些前提條件了。

了解Vuex的作用，以及他的使用場(chǎng)景。

會(huì)使用Vuex，對(duì)基本API熟練掌握。

有一顆求知的內(nèi)心（balabla的）。

Vuex我們通常稱之為狀態(tài)管理模式，用于解決組件間通信的以及多組件共享狀態(tài)等問(wèn)題。官網(wǎng)文檔中注明的場(chǎng)景十分影響框架開發(fā)的整體脈絡(luò)，也就是這個(gè)框架從一開始做就想解決這些問(wèn)題，

Vuex的核心API有哪些？

（=》符號(hào)代之類比 ->符號(hào)代表在vuex提供的輔助函數(shù)）

state ：數(shù)據(jù)倉(cāng)庫(kù)，所有的數(shù)據(jù)都存在這里。 =》 vue對(duì)象的data。

getters ：可以搭配倉(cāng)庫(kù)中的數(shù)據(jù)結(jié)合起來(lái)聯(lián)動(dòng)相應(yīng)的數(shù)據(jù) =》 vue的計(jì)算屬性 -> mapGetters

mutation ：更新數(shù)據(jù)倉(cāng)庫(kù)中的數(shù)據(jù) -> mapMutations

action ：負(fù)責(zé)異步操作（網(wǎng)絡(luò)請(qǐng)求、定時(shí)器等內(nèi)容）調(diào)用mutation來(lái)更新數(shù)據(jù) -> mapActions

modules : 模塊模式提供了命名空間使?fàn)顟B(tài)管理支持了樹形結(jié)構(gòu)。（畫重點(diǎn)）

把這些API分成倆大類：

負(fù)責(zé)向Vuex中輸入。

從Vuex中獲取數(shù)據(jù)使用。

action 與 mutation 解決了所有向Vuex更新數(shù)據(jù)的方式（同步與異步）。

getters 與 state 解決了vue組件（也可以是vuex內(nèi)部）從Vuex獲取數(shù)據(jù)。

modules呢當(dāng)然不屬于這兩大類，它是一個(gè)基石，他讓Vuex有了樹形結(jié)構(gòu)，
你可以將Vuex組織成一個(gè)模塊，每個(gè)模塊都有action、mutation、getters、state等方法。模塊之間有了父子關(guān)系。

以上這些都是針對(duì)于Vuex內(nèi)部的一些方法，可以在Vuex的實(shí)例上使用。
Vuex的實(shí)例一般都會(huì)掛載到Vue對(duì)象上。

輔助函數(shù)

為了方便使用Vuex還提供了一組輔助函數(shù)

在使用Vue進(jìn)行開發(fā)的時(shí)候，我們有大量的states、getters、mutations、actions要使用，每個(gè)都使用vuex實(shí)例去調(diào)用會(huì)浪費(fèi)很多代碼，尤其是在使用了命名空間（namespaced）之后，vuex實(shí)例去調(diào)用這些方法都要加上對(duì)應(yīng)的命名空間，所以就有了以下四個(gè)方法，接收一個(gè)namespace（可以為空），也就是命名空間前綴，以及一個(gè)對(duì)象、或者數(shù)組。

mapState 為組件創(chuàng)建計(jì)算屬性以返回 Vuex store 中的狀態(tài)。

mapGetters 為組件創(chuàng)建計(jì)算屬性以返回 getter 的返回值。

mapMutations 創(chuàng)建組件方法分發(fā) action。

mapActions 創(chuàng)建組件方法提交 mutation。

以上幾個(gè)方法都是為Vue組件遍歷使用而產(chǎn)生的。

但是還不夠極致，每個(gè)都要寫命名空間，
輔助函數(shù)還提供了createNamespacedHelpers。創(chuàng)建指定命名空間的輔助函數(shù)，

總結(jié)

Vuex的功能首先分為兩大類：

Vuex自己的實(shí)例使用 getters、mutations、actions

Vuex為組件中使用便利而提供的輔助函數(shù) mapGetters、mapMutations、mapActions、mapState、createNamespacedHelpers

Vuex自己內(nèi)部對(duì)數(shù)據(jù)狀態(tài)（state）有兩種功能：

修改數(shù)據(jù)狀態(tài) action：異步 mutation ：同步。

獲取數(shù)據(jù)狀態(tài) getter : 可以經(jīng)過(guò)計(jì)算 state ：直接返回?cái)?shù)據(jù)狀態(tài)。

Vuex支持的模式：模塊模式 modules，為Vuex提供樹形結(jié)構(gòu)，以及命名空間，幫助Vuex層級(jí)分明。

下一章分析一下脈絡(luò)

我是一個(gè)應(yīng)屆生，最近和朋友們維護(hù)了一個(gè)公眾號(hào)，內(nèi)容是我們?cè)趶膽?yīng)屆生過(guò)渡到開發(fā)這一路所踩過(guò)的坑，已經(jīng)我們一步步學(xué)習(xí)的記錄，如果感興趣的朋友可以關(guān)注一下，一同加油~