通俗易懂Vuex源碼導讀1-Vuex的安裝

Vuex 的安裝流程，Vue.use(Vuex)

index.js

• Vue安裝插件，經過Vue.use函數執行，該函數會調用插件暴露出來的「install」方法，並將 Vue類 傳遞進來。
• 首先，咱們找到 Vuex 的源碼文件 index.js
• 能夠看見，Vuex確實導出了install函數
• install 方法引用於store.js文件

store.js

• 在文件最底部，咱們找到 install 函數，裏面作了以下操做
• 獲取Vue實例，判斷Vuex是否已經加載過，並經過變量Vue，保存Vue調用install方法時，傳入的Vue類。
• 最後調用函數 applyMixin，applyMixin 引用於 mixin.js 文件

mixin.js

• 來到這裏，纔是具體安裝 Vuex 的函數

• 獲取Vue版本，根據不一樣的Vue版本，進行不一樣的注入操做

  • Vue2.0以上的，在Vue的beforeCreate生命鉤子中，執行安裝函數
  • Vue.mixin({ beforeCreate: VuexInit })
  • 這裏是經過mixin混合的方式，而調用者是install中傳遞進來的根Vue實例，因此這裏使用的是全局混合
  • 而根據Vue全局混合的定義，後續全部子組件都將進行一樣的混合
  • 因此全部子組件，在beforeCreate階段都將調用VuexInit方法
  • 低於2.0版本作的也是相似的事情，只是當前尚未生命週期鉤子，只能將安裝代碼插入到Vue的init方法裏面被調用

VuexInit方法

• 獲取配置文件，const options = this.$options。
• 這裏的this，是Vue實例，由於這個函數是在Vue的beforeCreate鉤子函數中被調用的。調用者是Vue實例。
• this.$options中的參數，能夠在new Vue根實例時，傳遞進去（固然就也能夠是vue本身的內部參數），官方介紹
• 若是有 this.$options.store，則表示是Vue根實例，由於store是在new Vue時傳進去的變量。例如，在Vuex的示例代碼中（/examples/counter/app.js），new Vue時，其中一項構造參數就是store

• 獲取this.$options.store，若是是傳遞的是函數，則調用該函數，原理與Vue的data同樣，經過工廠模式，當多實例複用同一個配置對象時，防止數據相互污染。示例代碼如（/examples/counter/store.js）官方介紹

• 但平時咱們單頁面應用只保存一個Vuex實例，因此通常直接傳入Vuex對象，函數模式用的比較少

• 若是沒有options.store，證實調用本函數的是Vue的子組件，不是根Vue實例。這時經過options.parent（options.parent是Vue的內置變量）找到父組件的索引。

  • 對應官網的parent變量，在options中定義vue的內置變量，可經過this.$訪問到，因此this.options.parent至關於this.$parent
• 找到父組件的$store變量，父組件的$store又源於其父組件的$store，經過層層遞歸，最終找到根Vue的$store變量
• 並賦值到子組件的this.$store，從而讓全部Vue組件都能經過this.$store找到Vuex對象實例。對應Vuex官網的這一段介紹

小姐 小結

• 以上實現了Vuex的安裝
• 全部Vue組件對Vuex對象的引用
• 在「store.js」這個模塊中，獲取並保存了Vue根實例的引用
• 到此爲止，Vuex暫時還未和Vue有什麼深層次的耦合，只是在Vue中添加了一個Vuex的變量引用而已

文章原稿，帶註釋源碼，戳這裏

文章持續輸出中，源碼註釋還未徹底整理，純當閱讀筆記，大神請勿較真

下一章節，將介紹Vuex.store的建立過程，真正接觸Vuex的功能代碼

總目錄

• 0-全局介紹
• 1-Vuex的安裝

• 2-Store的建立及模塊樹介紹

  • 2.1-installModule模塊安裝及內容建立
  • 2.2-resetStoreVM數據響應式的實現
• 3-Vuex官方文檔對照說明