Vuex源碼學習（一）功能梳理

what is Vuex ?

這句話我想每一個搜索過Vuex官網文檔的人都看到過，

在學習源碼前，固然要有一些前提條件了。

1. 瞭解Vuex的做用，以及他的使用場景。
2. 會使用Vuex，對基本API熟練掌握。
3. 有一顆求知的心裏（balabla的）。

Vuex咱們一般稱之爲狀態管理模式，用於解決組件間通訊的以及多組件共享狀態等問題。官網文檔中註明的場景十分影響框架開發的總體脈絡，也就是這個框架從一開始作就想解決這些問題，

Vuex的核心API有哪些？

（=》 符號代之類比 ->符號表明 在vuex提供的輔助函數）

1. state ： 數據倉庫，全部的數據都存在這裏。 =》 vue對象的data。

2. getters ：能夠搭配倉庫中的數據結合起來聯動相應的數據 =》 vue的計算屬性 -> mapGetters

3. mutation ：更新數據倉庫中的數據 -> mapMutations

4. action ：負責異步操做（網絡請求、定時器等內容）調用mutation來更新數據 -> mapActions

5. modules : 模塊模式 提供了命名空間 使狀態管理支持了樹形結構。（畫重點）

把這些API分紅倆大類：

1. 負責向Vuex中輸入。
2. 從Vuex中獲取數據使用。

   

action 與 mutation 解決了全部向Vuex更新數據的方式（同步與異步）。

getters 與 state 解決了vue組件（也能夠是vuex內部）從Vuex獲取數據。

modules呢 固然不屬於這兩大類，它是一個基石，他讓Vuex有了樹形結構， 你能夠將Vuex組織成一個模塊，每一個模塊都有action、mutation、getters、state等方法。模塊之間有了父子關係。

以上這些都是針對於Vuex內部的一些方法，能夠在Vuex的實例上使用。 Vuex的實例通常都會掛載到Vue對象上。

輔助函數

爲了方便使用Vuex還提供了一組輔助函數

在使用Vue進行開發的時候，咱們有大量的states、getters、mutations、actions要使用，每一個都使用vuex實例去調用會浪費不少代碼，尤爲是在使用了命名空間（namespaced）以後，vuex實例去調用這些方法都要加上對應的命名空間，因此就有了如下四個方法，接收一個namespace（能夠爲空），也就是命名空間前綴，以及一個對象、或者數組。

1. mapState 爲組件建立計算屬性以返回 Vuex store 中的狀態。
2. mapGetters 爲組件建立計算屬性以返回 getter 的返回值。
3. mapMutations 建立組件方法分發 action。
4. mapActions 建立組件方法提交 mutation。

以上幾個方法都是爲Vue組件遍歷使用而產生的。

可是還不夠極致，每一個都要寫命名空間， 輔助函數還提供了createNamespacedHelpers。建立指定命名空間的輔助函數，

總結

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

1. Vuex本身的實例使用 getters、mutations、actions
2. Vuex爲組件中使用便利而提供的輔助函數 mapGetters、mapMutations、mapActions、mapState、createNamespacedHelpers

Vuex本身內部對數據狀態（state）有兩種功能：

1. 修改數據狀態 action：異步 mutation ： 同步。
2. 獲取數據狀態 getter : 能夠通過計算 state ： 直接返回數據狀態。

Vuex支持的模式：模塊模式 modules，爲Vuex提供樹形結構，以及命名空間，幫助Vuex層級分明。

下一章分析一下脈絡

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