Vuex原始碼學習（三）install都做了哪些事情

各位看官 沒看過功能梳理的可以先閱讀下 Vuex原始碼學習（二）脈絡梳理.

為什麼要有install函式

在Vue外掛如何被註冊到Vue上呢？ 使用use

// 正確的註冊外掛方式：
Vue.use(Vuex);
// 這裡會執行Vuex的install方法。
複製程式碼

我們來看一下install函式的程式碼

這塊一共做了兩件事情：

1. 判斷以下vuex外掛是否已經完成安裝了
2. 開始真正的vuex外掛安裝的具體邏輯

如何判斷Vuex是否安裝?

先解決兩個小問題 _Vue是什麼？

_Vue是註冊外掛時，被傳遞進來的Vue建構函式，

---

為什麼宣告Vue變數？ 宣告Vue這個變數的意義是在Vuex內部不引入Vue這個建構函式（Vue框架的程式碼）， 而是等待Vue.use(Vuex)之後把外部引入的Vue物件傳遞進去。 給Vue物件的賦值操作只有在install函式內，所以Vue變數存在並且等於_Vue（這個外部傳遞進來的Vue建構函式）的話，代表Vuex已經完成了install， 就會有一個提示。

引發想法 註冊Vuex外掛與例項化Vuex.Store建構函式先後順序

1. 先註冊後例項化：

Vue.use(Vuex)
export default new Vuex.Store({
  state : {
    tryData : 'recruitment',
  },
  modules : {
    list : moduleList,
    set : moduleSet
  }
});
// 沒有問題
複製程式碼

export default new Vuex.Store({
  state : {
    tryData : 'recruitment',
  },
  modules : {
    list : moduleList,
    set : moduleSet
  }
});

Vue.use(Vuex)
//會報錯
複製程式碼

Vuex安裝的時候具體做了什麼？

安裝做了什麼就要去看applyMixin函式做了什麼

上程式碼

核心 -> vuexInit

1. 判斷版本，Vue2.0以上使用生命週期，Vue1.0使用Vue.protoType.init
2. 完成掛載

我沒有使用過Vue1.0版本，所以就對Vue2.0版本進行一個解釋吧，

if (version >= 2) {
    // 2.0版本以上 通過mixin的方式在每個Vue物件的beforeCreate生命週期執行的時候完成vuex初始化
    Vue.mixin({ beforeCreate: vuexInit })
 } 
複製程式碼

function vuexInit () {
    // 獲取當前Vue物件的options
    const options = this.$options
    // store injection
    // 根結點物件的options上會被掛載store，在new Vue的時候做的
    if (options.store) {
      // 把根結點上的store傳遞給元件的$store屬性上，訪問的是同一個物件
      this.$store = typeof options.store === 'function'
        ? options.store()
        : options.store
    } else if (options.parent && options.parent.$store) {
      // 不是根結點，那麼從這個節點的父節點上拿到$store傳遞給子節點
      // Vue這個元件樹是從根結點向下一層一層的生成Vue物件的，所以根結點有根結點的兒子節點就會有$store屬性，
      //同理這些節點的子節點也會有$store，
      //最後每一個Vue的例項物件都會有$store屬性，
      //全部都指向同一個物件，就是那個被例項化的Vuex內的store物件。
      this.$store = options.parent.$store
    }
}
複製程式碼

總結

1. install函式的意義？

   Vuex註冊的時候，必須要暴露出這個方法，供Vue使用。

2. install函式做了什麼？

   判斷Vuex是否已經註冊，註冊過就不再註冊，

   Vue2.0給每個Vue元件的beforeCreate生命週期中增加vuexInit函式， 給每個Vue元件上掛載一個$store物件，全部都指向Vuex的Store例項化的物件。

下一章講述ModuleCollection類做了什麼