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類作了什麼