Vuex 源碼解析（如何閱讀源代碼實踐篇）

上一篇文章說的是如何閱讀框架源代碼，收到了「如果更詳細一點就好了」的反饋，不如就以 Vuex 為切入點進行一次實踐吧，不矯揉不造作，說走咱就走~~

一、前提

本文假定你已經對 Vue 的使用上有一定的概念，不要求輕車熟路（使用過 Vuex 當然是最好的），但至少要了解基本的事件綁定方式，以及 Mixin 的用法，官方文檔從此去

二、Vuex 解決了什麼問題

官方的說法：Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式

這裡首先要搞清楚什麼是狀態，狀態就是數據，也就是說： Vuex 提供了一套 Vue 應用統一的數據源管理模式，除了定義數據源，還定義了數據的管理模式

這其中，Store 所包含的兩個核心部分 State 和 Actions 分別代表了數據源，和數據的管理（操作）模式，同時作為一個全局的 VM，其有效的協調了 Vue 各組件間的通信

三、Vuex 的設計思想

如果讀 Vue 文檔的時候足夠留心，興許你能在插件一節找到蛛絲馬跡:

插件的功能包括，通過全局 mixin 方法添加一些組件選項，如：vuex

也就是說，Vuex 不過是 Vue 的一個插件，通過 Mixin 的方式給每個組件注入一個 $store 對象，由於每個組件的 $store 指向的是同一個 store 對象（後面通過詳讀代碼可以知道，這個 $store 其實是一個 VM 對象），所以 store 是全局的，這就印證了之前在我們為什麼需要 Vuex中的一個結論，Vuex 類似於一個事件匯流排

四、詳讀代碼

通過 Mixin 注入 Store

從入口文件 index.js 開始，代碼不多，可以直接貼出來

如果你一眼就看出這裡的關鍵是 install，那麼你應該領略到讀源碼先了解設計思想的獨特魅力了，沒錯，作為 Vue 的 Plugin，install 方法就是入口

循著 install 方法進入 store.js，還是符合預期，這個方法主要幹得是事情就是 mixin

並且還有一個小細節，瀏覽器環境下並且 Vue 不為空的時候，引入 Vuex 之後是會自動註冊的

具體來看看 mixin.js 這個文件，劃重點（注意看注釋）：

Store 對象

Vuex 的最佳實踐中，一般這樣使用（帶著目標去閱讀，效果更佳）：

我們需要新建一個 Store，在創建 Vue 實例的時候，作為參數傳入，在上一節的 vuexInit 函數中，是從 this.$options 中取出 store 賦值給組件的 $store 的，如此，便能無縫聯繫上了

接下來的重點，就是 Store 這個類了，還是 store.js 這個文件，懷著入參為 ations 和 modules 的預期，來讀 constructor 方法，倒是有一個語句是用來處理 modules 的

但真的是尋尋覓覓尋不到從 options 中取出 actions 進行處理的方法，當然後面仔細閱讀了 ModuleCollection 中的代碼之後，才找到了答案，actions 參數也是在這裡面提取的。畢竟讓我糾結迷茫了良久，如果是我來寫的話，我可能不會這麼寫，方法的命名需要有語義性，而且一個方法也應當只做一件事情

原則上為了儘快理清主流程，有些細節需要暫時略過（所以語義化的命名、合理的函數拆分，對閱讀者來說是多麼的重要），假設已經知道前面的步驟已經從 options 中讀到了 actions 和 modules，那麼下一個核心節點就是：

這一步再進行分解（注意看注釋）

出於篇幅以及希望閱讀的同學親自實踐的目的，具體的註冊方式這裡不再展開

進入下一個重要環節 resetStoreVM，創建 VM，實現數據監聽(注意看注釋)

五、小結

至此，Vuex 的主流程代碼基本上算是走了一遍，看似神奇，可是代碼量並不大，還是那句話，希望閱讀的同學能夠按照這個套路自己走一遍

為了大家不走散：

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！