通俗易懂Vuex源碼導讀0-全局介紹

時間 2019-12-07

標籤通俗易懂 vuex 源碼導讀全局介紹简体版

原文原文鏈接

本系列文章目的

真正的代碼解析html
- 網上有不少關於「vuex源碼解析」的文章。但可能筆者水平有限，總以爲這些文章不太直觀。vue
- 部分文章只是在按順序逐個js文件進行介紹，並無根據程序的運行邏輯介紹，也沒有與官方文檔進行對應。git
- 只有當真正理解了源碼之後才恍然大悟，哦！原來文章是這個意思。github
- 但這時文章已經失去了幫助理解源碼，幫助解析的意義。vuex
本文經過如下方式幫助閱讀，理解源碼chrome
- 給出數據結構，並介紹各數據的意義。npm
- 拋出結論，即給出源碼的總體運行原理。json
- 按照程序運行邏輯進行介紹，摒棄常規逐個文件進行介紹的方法。按照邏輯順序進行介紹。segmentfault
- 對應官網的介紹文章進行介紹。數組
- 儘可能圖文豐富，穿插表情包，讓學習過程更愉悅些。
- 經過以上的方式，帶着總體印象去看源碼，逐步進行驗證，加深理解。不用一頭霧水地猜源碼。
但願能經過系列文章
- 能將vuex源碼邏輯講清楚，幫助你們理解源碼。
- 讓你們瞭解vuex的實現機制，使用起來更踏實，打破顧慮。
- 也但願藉此消除你們對源碼的恐懼，養成閱讀源碼的習慣。

文章閱讀方式，及流程

正如前面所說，須要事先了解下文給出的「變量介紹」，「運行原理」。起碼要有個印象，後續講解中，能帶着結論，不斷去印證。
按順序閱讀，因爲代碼解析是根據程序運行邏輯進行介紹的，先後相互關聯，因此須要按照順序閱讀
但當內容較爲複雜，嵌套太深時，會拆分出來說。能夠先點擊連接，跳轉到細則中看完，再回到主邏輯繼續閱讀
本文講得比較細，可能略顯繁瑣，大神請多包涵。理解能力強的同窗，能夠選擇性跳過。

源碼調試方法

雖然本文用不到，但可能有些同窗想要本身打斷點，打日誌查看實際運行過程，因此在此進行介紹
辦法很簡單，修改 vuex 庫的索引源便可。例如修改示例中的 example->counter->store.js 文件
```
import Vue from 'vue'
// import Vuex from 'vuex'
import Vuex from '../../src/index'
複製代碼
```
原理是，將本來對庫的文件（build以後，被壓縮過的）索引，改爲對vuex源文件的索引
'../../src/index' 是/src/index.js文件，即vuex源碼的入口文件
修改後，參考 package.json 的說明，在目錄下運行命令行npm run dev，便可執行示例程序
在源碼後打的日誌或者斷點，就能在示例中執行

運行原理(重點)

經過變量 _modules 變量保存配置項模塊樹（其數據結構與配置項的數據結構相同，至關於配置文件的拷貝，只是對數據進行了些處理）
經過 state 變量保存與 _modules 模塊樹相同結構的 state 結構樹，只是內容比較純粹，全是state變量。
- 對應下圖，獲取c變量，則爲state(頂層module的state，即moduleA).moduleB.moduleC.c，
- 子模塊被當作 state 的一部分，以模塊名爲 key ，模塊的 state 爲 value 進行關聯
```
moduleA:{
  ...,
  state:{a:'a'},
  modules:{
    moduleB:{
        ...,
        state:{b:'b'},
        modules:{
          moduleC:{
            state:{c:'c'},
          }
        }
      }
  }
}
複製代碼
```
經過 _actions，_mutations，getters 數組保存全部模塊配置中的 action, mutation，getter函數
- 如模塊A，和模塊B均有一個action函數actionFun，記作actionFun1和actionFun2。
- 則 _actions.actionFun = [actionFun1，actionFun2]
- 若是模塊設置了命名空間，則在保存函數時，往函數名中添加命名空間層級前綴。
- 如模塊C也有一個 action 函數actionFun，記作actionFun3，但因爲設置了命名空間前綴，在_actions中保存時，將這樣保存_actions['C/action'] = actionFun3
調用 commit，dispatch，getter 時，從上面定義的容器中，找到同名的數組，順序調用裏面的函數
數據綁定的效果，經過 Vue 的 watch，computed 特性完成
總的來講，除了module和state使用了樹結構，其餘的都經過數組變量容器保存，須要用到的時候，再從裏面拿。和咱們簡單地經過全局變量保存沒太大的區別。只是作出了規範。

變量介紹(重點)

用得比較多的，出現比較頻繁的變量，預先介紹一下

【_committing】提交狀態
- 在嚴格模式時，只要當_committing給false才能夠修改state內容，用於防止非commit方式修改state（例如直接對state的變量進行賦值）。
【_actions】action 函數數組對象容器
- 保存全部action函數數組，如 _actions.actionFun = [actionFun1，actionFun2]
- 調用 dispatch 函數時，將獲取 _actions 的同名數組，依次調用數組裏面的函數
【_mutations】 mutation 函數數組對象容器
- 數據結構與_actions相同
- 調用 commit 函數時，將獲取 _mutations 的同名數組，順序執行數組中保存的函數
【_wrappedGetters】
- 保存 getter 函數的函數數組對象容器。
- 經過this.$store.getters 獲取的就是 _wrappedGetters 對象，只是中間進行了一些處理
【_modules】模塊樹，經過樹結構，保存配置文件內容
【store】存儲對象
- 即this.$store，即整個vuex功能的實現函數，能夠理解爲vuex的對象實例
- 【store._vm】vuex內部保存的vue對象實例，用於藉助 vue 的 watch 函數和 computed 函數實現數據響應
- 【store.getters】即 this.$store.getter，最終將調用 _wrappedGetters

【path】模塊層級數組

保存各個祖先模塊的名字的數組，例如

moduleA:{ // 對應path爲[]
  ...,
  modules:{
    moduleB:{ // 對應path爲['A']
        ...,
        modules:{
          moduleC:{}  // 對應path爲['A','B']
        }
      }
  }
}
複製代碼

源代碼文件介紹

【module】模塊相關處理的文件夾
- 【module.js】生成模塊對象
- 【module-collection.js】遞歸解析模塊配置，生成由「module.js 」的模塊對象組成的模塊樹
【plugins】插件相關，與主體功能無關
- 【devtool.js】 chrome 的 vue 調試插件中使用到的代碼，主要實現數據回滾功能
- 【logger.js】日誌打印相關
【helpers.js】輔助函數，mapGetters，mapActions，mapMutations等函數的實現
【index.esm.js】入口文件
【index.js】入口文件
【mixin.js】vue 混合函數，實現 vuex 的安裝功能
【store.js】vuex 存儲類，實現 vuex 的主體功能。
【util.js】工具函數庫，複用一些經常使用函數