淺談Vuex注入Vue生命周期的過(guò)程

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

function initGlobalAPI (Vue) {
 ......
 initUse(Vue);
 initMixin$1(Vue); // 下面講 Vue.mixin 會(huì)提到
 ......
}

function initUse (Vue) {
 Vue.use = function (plugin) {
 var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
 /* 判斷過(guò)這個(gè)插件是否已經(jīng)安裝 */
 if (installedPlugins.indexOf(plugin) > -1) {
 return this
 }
 var args = toArray(arguments, 1);
 args.unshift(this);
 /* 判斷插件是否有 install 方法 */
 if (typeof plugin.install === 'function') {
 plugin.install.apply(plugin, args);
 } else if (typeof plugin === 'function') {
 plugin.apply(null, args);
 }
 installedPlugins.push(plugin);
 return this
 };
}

/* 暴露給外部的 install 方法 */
function install (_Vue) {
 /* 避免重復(fù)安裝（Vue.use 內(nèi)部也會(huì)檢測(cè)一次是否重復(fù)安裝同一個(gè)插件）*/
 if (Vue && _Vue === Vue) {
 {
 console.error(
 '[vuex] already installed. Vue.use(Vuex) should be called only once.'
 );
 }
 return
 }
 Vue = _Vue;
 /* 將 vuexInit 混淆進(jìn) Vue 的 beforeCreate(Vue2.0) 或 _init 方法(Vue1.0) */
 applyMixin(Vue);
}

/* 將 vuexInit 混淆進(jìn) Vue 的 beforeCreate */
function applyMixin (Vue) {
 var version = Number(Vue.version.split('.')[0]);
 if (version >= 2) {
 Vue.mixin({ beforeCreate: vuexInit });
 } else {
 /* Vue1.0 的處理邏輯，此處省略 */
 ......
 }
 function vuexInit () {
 ......
 }
}

new Vue({
 el: '#app',
 store
});

 function vuexInit () {
 const options = this.$options
 if (options.store) {
 /* 根節(jié)點(diǎn)存在 stroe 時(shí) */
 this.$store = typeof options.store === 'function'
 ? options.store()
 : options.store
 } else if (options.parent && options.parent.$store) {
 /* 子組件直接從父組件中獲取 $store，這樣就保證了所有組件都公用了全局的同一份 store*/
 this.$store = options.parent.$store
 }
 }

function initMixin$1 (Vue) {
 Vue.mixin = function (mixin) {
 this.options = mergeOptions(this.options, mixin);
 return this
 };
}

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'

Vue.use(Vuex)

const state = {
 showState: 0,    
}

export default new Vuex.Store({
 strict: true,
	state,
	getters,
})

/* 使用 Vue 內(nèi)部的響應(yīng)式注冊(cè) state */
function resetStoreVM (store, state, hot) {
 /* 存放之前的vm對(duì)象 */
 const oldVm = store._vm 

 store.getters = {}
 const wrappedGetters = store._wrappedGetters
 const computed = {}

 /* 通過(guò) Object.defineProperty 方法為 store.getters 定義了 get 方法。當(dāng)在組件中調(diào)用 this.$store.getters.xxx 這個(gè)方法的時(shí)候，會(huì)訪問(wèn) store._vm[xxx]*/
 forEachValue(wrappedGetters, (fn, key) => {
 computed[key] = partial(fn, store)
 Object.defineProperty(store.getters, key, {
 get: () => store._vm[key],
 enumerable: true // for local getters
 })
 })

 const silent = Vue.config.silent
 /* 設(shè)置 silent 為 true 的目的是為了取消 _vm 的所有日志和警告 */
 Vue.config.silent = true
 /* 這里new了一個(gè)Vue對(duì)象，運(yùn)用Vue內(nèi)部的響應(yīng)式實(shí)現(xiàn)注冊(cè)state以及computed*/
 store._vm = new Vue({
 data: {
 $$state: state
 },
 computed
 })
 Vue.config.silent = silent

 /* 使能嚴(yán)格模式，Vuex 中對(duì) state 的修改只能在 mutation 的回調(diào)函數(shù)里 */
 if (store.strict) {
 enableStrictMode(store)
 }

 if (oldVm) {
 /* 解除舊 vm 的 state 的引用，并銷毀這個(gè)舊的 _vm 對(duì)象 */
 if (hot) {
 store._withCommit(() => {
 oldVm._data.$$state = null
 })
 }
 Vue.nextTick(() => oldVm.$destroy())
 }
}

commit (_type, _payload, _options) {
 /* unifyObjectStyle 方法校參 */
 const {
 type,
 payload,
 options
 } = unifyObjectStyle(_type, _payload, _options)

 const mutation = { type, payload }
 /* 找到相應(yīng)的 mutation 方法 */
 const entry = this._mutations[type]
 if (!entry) {
 if (process.env.NODE_ENV !== 'production') {
 console.error(`[vuex] unknown mutation type: ${type}`)
 }
 return
 }
 /* 執(zhí)行 mutation 中的方法 */
 this._withCommit(() => {
 entry.forEach(function commitIterator (handler) {
 handler(payload)
 })
 })
 /* 通知所有訂閱者，傳入當(dāng)前的 mutation 對(duì)象和當(dāng)前的 state */
 this._subscribers.forEach(sub => sub(mutation, this.state))

 if (
 process.env.NODE_ENV !== 'production' &&
 options && options.silent
 ) {
 console.warn(
 `[vuex] mutation type: ${type}. Silent option has been removed. ` +
 'Use the filter functionality in the vue-devtools'
 )
 }
}