深刻學習Vuex

時間 2019-11-07

標籤深刻學習 vuex 简体版

原文原文鏈接

深刻學習Vuex

vuex做爲配合vue使用的數據狀態管理庫，針對解決兄弟組件或多層級組件共享數據狀態的痛點問題來講，很是好用。本文以使用者的角度，結合源碼來學習vuex。其中也參考了許多前輩的文章,參見最後的Referencehtml

Vue加載Vuex（Vue.use(Vuex)）

Vue加載Vuex仍是很簡單的，讓咱們以官方文檔上實例爲切入點來開始認識Vuexvue

import Vue from 'vue'
import Vuex from 'vuex'
import cart from './modules/cart'
import products from './modules/products'
import createLogger from '../../../src/plugins/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  modules: {
    cart,
    products
  },
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

這段代碼咱們再熟悉不過了，就是Vue加載Vuex插件，而後new了一個Vuex實例。
咱們一步一步來看，首先看一下Vue如何加載的Vuex，也就是Vue.use(Vuex)發生了什麼。react

Vue.use = function (plugin: Function | Object) {
    /* istanbul ignore if */
    /*標識位檢測該插件是否已經被安裝*/
    if (plugin.installed) {
      return
    }
    // additional parameters
    const args = toArray(arguments, 1)
    /*將this(Vue構造函數)加入數組頭部*/
    args.unshift(this)
    if (typeof plugin.install === 'function') {
      /*install執行插件安裝*/
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    //標記插件已安裝
    plugin.installed = true
    return this
  }

主要作了幾件事：git

驗證是否已安裝，避免重複
若是插件提供install方法，則執行不然把插件看成function執行
最後標記插件已安裝

那麼Vuex提供install方法了嗎？答案是確定的github

let Vue // bind on install
export function install (_Vue) {
  if (Vue) {
    /*避免重複安裝（Vue.use內部也會檢測一次是否重複安裝同一個插件）*/
    if (process.env.NODE_ENV !== 'production') {
      console.error(
        '[vuex] already installed. Vue.use(Vuex) should be called only once.'
      )
    }
    return
  }
  /*保存Vue，同時用於檢測是否重複安裝*/
  Vue = _Vue//Vue構造函數
  /*將vuexInit混淆進Vue的beforeCreate(Vue2.0)或_init方法(Vue1.0)*/
  applyMixin(Vue)
}

看mixin以前咱們能夠先思考一個問題，咱們在訪問Vuex的數據的時候基本都是這樣訪問的，好比this.user = this.$store.state.global.user,this.$store是何時加到Vue實例上的？applyMixin會給出答案，讓咱們繼續看applyMixin發生了什麼web

// applyMixin：
export default function (Vue) {
  /*獲取Vue版本，鑑別Vue1.0仍是Vue2.0*/
  const version = Number(Vue.version.split('.')[0])

  if (version >= 2) {
    /*經過mixin將vuexInit混淆到Vue實例的beforeCreate鉤子中*/
    Vue.mixin({ beforeCreate: vuexInit })
  } else {
    // override init and inject vuex init procedure
    // for 1.x backwards compatibility.
    /*將vuexInit放入_init中調用*/
    const _init = Vue.prototype._init
    Vue.prototype._init = function (options = {}) {
      options.init = options.init
        ? [vuexInit].concat(options.init)
        : vuexInit
      _init.call(this, options)
    }
  }

  /**
   * Vuex init hook, injected into each instances init hooks list.
   */
   /*Vuex的init鉤子，會存入每個Vue實例等鉤子列表*/
  function vuexInit () {
    // this  = vue object
    const options = this.$options
    // store injection
    if (options.store) {
      /*存在store其實表明的就是Root節點，直接執行store（function時）或者使用store（非function）*/
      this.$store = typeof options.store === 'function'
        ? options.store()
        : options.store
    } else if (options.parent && options.parent.$store) {
      /*子組件直接從父組件中獲取$store，這樣就保證了全部組件都公用了全局的同一份store*/
      this.$store = options.parent.$store
    }
  }
}

咱們這裏就只看2.0了，思路就是經過Vue.mixin把掛載$store的動做放在beforeCreate鉤子上，由此實現了每一個組件實例均可以經過this.$store來直接訪問數據。
注意：mixin的細節vuex

同名鉤子函數將混合爲一個數組，所以都將被調用。另外，混入對象的鉤子將在組件自身鉤子以前調用。
使用全局混入對象，將會影響到全部以後建立的 Vue 實例。

至此，Vue.use(Vuex)咱們已經瞭解完了。api

Vuex結構總覽

順着咱們實例代碼的思路，接下來咱們應該開始看構造器了，不過開始看以前，咱們先看一下Vuex.store Class都定義了些什麼。數組

export class Store {
  constructor (options = {}) {
  }
    
  // state 取值函數（getter）
  get state () {
  }
  //存值函數（setter）
  set state (v) {
  }

  /* 調用mutation的commit方法 */
  commit (_type, _payload, _options) {
  }

  /* 調用action的dispatch方法 */
  dispatch (_type, _payload) {
  }

  /* 註冊一個訂閱函數，返回取消訂閱的函數 */
  subscribe (fn) {
  }

  /* 觀察一個getter方法 */
  watch (getter, cb, options) {
  }

  /* 重置state */
  replaceState (state) {
  }

  /* 註冊一個動態module，當業務進行異步加載的時候，能夠經過該接口進行註冊動態module */
  registerModule (path, rawModule) {
  }

  /* 註銷一個動態module */
  unregisterModule (path) {
  }

  /* 熱更新 */
  hotUpdate (newOptions) {
  }

  /* 保證經過mutation修改store的數據 */
  // 內部使用，好比當外部強行改變state的數據時直接報錯
  _withCommit (fn) {
  }
}

以上就是定義的接口了，官方文檔上實例屬性和方法都在這裏找獲得。
來看一張大神畫的圖有助於理解思路瀏覽器

出處見最後。
接下來咱們繼續實例思路

export default new Vuex.Store({
  modules: {
    cart,
    products
  },
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

來看一下構造函數

constructor (options = {}) {
    // Auto install if it is not done yet and `window` has `Vue`.
    // To allow users to avoid auto-installation in some cases,
    // this code should be placed here. See #731
    /*
      在瀏覽器環境下，若是插件還未安裝（!Vue即判斷是否未安裝），則它會自動安裝。
      它容許用戶在某些狀況下避免自動安裝。
    */
    if (!Vue && typeof window !== 'undefined' && window.Vue) {
      install(window.Vue) // 將store註冊到實例或conponent
    }

    if (process.env.NODE_ENV !== 'production') {
      assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
      assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
      //檢查是否是new 操做符調用的
      assert(this instanceof Store, `Store must be called with the new operator.`)
    }

    const {
      /*一個數組，包含應用在 store 上的插件方法。這些插件直接接收 store 做爲惟一參數，能夠監聽 mutation（用於外部地數據持久化、記錄或調試）或者提交 mutation （用於內部數據，例如 websocket 或 某些觀察者）*/
      plugins = [],
      /*使 Vuex store 進入嚴格模式，在嚴格模式下，任何 mutation 處理函數之外修改 Vuex state 都會拋出錯誤。*/
      strict = false
    } = options

    /*從option中取出state，若是state是function則執行，最終獲得一個對象*/
    let {
      state = {}
    } = options
    if (typeof state === 'function') {
      state = state()
    }

    // store internal state
    /* 用來判斷嚴格模式下是不是用mutation修改state的 */
    this._committing = false
    /* 存放action */
    this._actions = Object.create(null)
    /* 存放mutation */
    this._mutations = Object.create(null)
    /* 存放getter */
    //包裝後的getter
    this._wrappedGetters = Object.create(null)
    /* module收集器 */
    this._modules = new ModuleCollection(options)
    /* 根據namespace存放module */
    this._modulesNamespaceMap = Object.create(null)
    /* 存放訂閱者 外部插件使用 */
    this._subscribers = []
    /* 用以實現Watch的Vue實例 */
    this._watcherVM = new Vue()

    // bind commit and dispatch to self
    /*將dispatch與commit調用的this綁定爲store對象自己，不然在組件內部this.dispatch時的this會指向組件的vm*/
    const store = this
    const {dispatch, commit} = this
    /* 爲dispatch與commit綁定this（Store實例自己） */
    this.dispatch = function boundDispatch (type, payload) {
      return dispatch.call(store, type, payload)
    }
    this.commit = function boundCommit (type, payload, options) {
      return commit.call(store, type, payload, options)
    }

    // strict mode
    /*嚴格模式(使 Vuex store 進入嚴格模式，在嚴格模式下，任何 mutation 處理函數之外修改 Vuex state 都會拋出錯誤)*/
    this.strict = strict

    // init root module.
    // this also recursively registers all sub-modules
    // and collects all module getters inside this._wrappedGetters
    /*初始化根module，這也同時遞歸註冊了全部子modle，收集全部module的getter到_wrappedGetters中去，this._modules.root表明根module才獨有保存的Module對象*/
    installModule(this, state, [], this._modules.root)

    // initialize the store vm, which is responsible for the reactivity
    // (also registers _wrappedGetters as computed properties)
    /* 經過vm重設store，新建Vue對象使用Vue內部的響應式實現註冊state以及computed */
    resetStoreVM(this, state)

    // apply plugins
    /* 調用插件 */
    plugins.forEach(plugin => plugin(this))

    /* devtool插件 */
    if (Vue.config.devtools) {
      devtoolPlugin(this)
    }
  }

Vuex的源碼一共就一千行左右，構造函數吃透基本掌握至少一半了，構造函數中主要是初始化各類屬性。簡單的詳見註釋，這裏咱們主要看如何解析處理modules，首先來看this._modules = new ModuleCollection(options),ModuleCollection結構以下

import Module from './module'
import { assert, forEachValue } from '../util'

/*module收集類*/
export default class ModuleCollection {
  constructor (rawRootModule) { // new store(options)
    // register root module (Vuex.Store options)
    this.register([], rawRootModule, false)
  }

  /*獲取父級module*/
  get (path) {
  }

  /*
    獲取namespace，當namespaced爲true的時候會返回'moduleName/name'
    默認狀況下，模塊內部的 action、mutation 和 getter 是註冊在全局命名空間的——這樣使得多個模塊可以對同一 mutation 或 action 做出響應。
    若是但願你的模塊更加自包含或提升可重用性，你能夠經過添加 namespaced: true 的方式使其成爲命名空間模塊。
    當模塊被註冊後，它的全部 getter、action 及 mutation 都會自動根據模塊註冊的路徑調整命名。
  */
  getNamespace (path) {
  }

  update (rawRootModule) {
  }

  /*註冊*/
  register (path, rawModule, runtime = true) {
    if (process.env.NODE_ENV !== 'production') {
      assertRawModule(path, rawModule)
    }

    /*新建一個Module對象*/
    const newModule = new Module(rawModule, runtime)
    if (path.length === 0) {
      /*path爲空數組的表明跟節點*/
      this.root = newModule
    } else {
      /*獲取父級module*/
      const parent = this.get(path.slice(0, -1))//排除倒數第一個元素的數組，
      /*在父module中插入一個子module*/
      parent.addChild(path[path.length - 1], newModule)
    }

    // register nested modules
    /*遞歸註冊module*/
    if (rawModule.modules) {
      forEachValue(rawModule.modules, (rawChildModule, key) => {
        // concat不改變源數組，返回合併後的數組
        this.register(path.concat(key), rawChildModule, runtime)
      })
    }
  }

  /*註銷*/
  unregister (path) {
  }
}
/*Module構造類*/
export default class Module {
  constructor (rawModule, runtime) {
    this.runtime = runtime
    this._children = Object.create(null)
    /*保存module*/
    this._rawModule = rawModule
    /*保存modele的state*/
    const rawState = rawModule.state
    this.state = (typeof rawState === 'function' ? rawState() : rawState) || {}
  }

  /* 獲取namespace */
  get namespaced () {
  }

  /*插入一個子module，存入_children中*/
  addChild (key, module) {
    this._children[key] = module
  }

  /*移除一個子module*/
  removeChild (key) {
  }

  /*根據key獲取子module*/
  getChild (key) {
    return this._children[key]
  }

  /* 更新module */
  update (rawModule) {
  }
  /* 遍歷child  */
  forEachChild (fn) {
  }

  /* 遍歷getter */
  forEachGetter (fn) {
  }

  /* 遍歷action */
  forEachAction (fn) {
  }

  /* 遍歷matation */
  forEachMutation (fn) {
  }
}

ModuleCollection的做用就是收集和管理Module，構造函數中對咱們傳入的options的module進行了註冊（register 是重點，詳見註釋，註冊方法中使用了遞歸，以此來註冊全部的module）。咱們給出的實例通過ModuleCollection的收集以後變成了什麼樣子呢？

//this._modules簡單結構示例
{
  root: {
    state: {},
    _children: {
      cart: {
        ...
      },
      products: {
        ...
      }
    }
  }
}

收集完了以後，咱們看一下是如何初始化這些module的installModule(this, state, [], this._modules.root)

function installModule (store, rootState, path, module, hot) {
  /* 是不是根module */
  const isRoot = !path.length
  /* 獲取module的namespace */
  const namespace = store._modules.getNamespace(path)

  // register in namespace map
  /* 若是有namespace則在_modulesNamespaceMap中註冊 */
  if (module.namespaced) {
    store._modulesNamespaceMap[namespace] = module
  }

  // set state
  if (!isRoot && !hot) {
    /* 獲取父級的state */
    const parentState = getNestedState(rootState, path.slice(0, -1))//深度取值，並返回取到的值
    /* module的name */
    const moduleName = path[path.length - 1]
    store._withCommit(() => {// 添加響應式屬性
      /* 將子module設置稱響應式的 */
      Vue.set(parentState, moduleName, module.state)
    })
  }
  // 當前模塊上下文信息
  const local = module.context = makeLocalContext(store, namespace, path)

  /* 遍歷註冊mutation */
  //mutation:key對應的handler
  module.forEachMutation((mutation, key) => {
    const namespacedType = namespace + key
    registerMutation(store, namespacedType, mutation, local)
  })

  /* 遍歷註冊action */
  module.forEachAction((action, key) => {
    const namespacedType = namespace + key
    registerAction(store, namespacedType, action, local)
  })

  /* 遍歷註冊getter */
  module.forEachGetter((getter, key) => {
    const namespacedType = namespace + key
    registerGetter(store, namespacedType, getter, local)
  })

  /* 遞歸安裝mudule */
  module.forEachChild((child, key) => {
    installModule(store, rootState, path.concat(key), child, hot)
  })
}

在這裏構造了各個module的信息也就是localConext,包括各個模塊的mutation,action ,getter ,mudule ,其中運用到了許多包裝的技巧（主要爲了計算模塊的路徑），還有代理的方式訪問數據,詳見註釋

resetStoreVM方法思路就是藉助Vue響應式來實現Vuex的響應式

/* 經過vm重設store，新建Vue對象使用Vue內部的響應式實現註冊state以及computed */
function resetStoreVM (store, state, hot) {
  /* 存放以前的vm對象 */
  const oldVm = store._vm

  // bind store public getters
  store.getters = {}
  const wrappedGetters = store._wrappedGetters
  const computed = {}

  /* 經過Object.defineProperty爲每個getter方法設置get方法，好比獲取this.$store.getters.test的時候獲取的是store._vm.test，也就是Vue對象的computed屬性 */
  // key = wrappedGetters的key，fn = wrappedGetters的key對應的value
  forEachValue(wrappedGetters, (fn, key) => {
    // use computed to leverage its lazy-caching mechanism
    computed[key] = () => fn(store)
    // store.getter並無像state同樣在class直接註冊了getter，setter，而是在這裏定義的
    // 用過代理的方式藉助Vue計算屬性實現了Vuex的計算屬性
    Object.defineProperty(store.getters, key, {
      get: () => store._vm[key], // 獲取計算蘇屬性（響應式）
      enumerable: true // for local getters
    })
  })

  // use a Vue instance to store the state tree
  // suppress warnings just in case the user has added
  // some funky global mixins
  const silent = Vue.config.silent
  /* Vue.config.silent暫時設置爲true的目的是在new一個Vue實例的過程當中不會報出一切警告 */
  Vue.config.silent = true
  /*  這裏new了一個Vue對象，運用Vue內部的響應式實現註冊state以及computed*/
  //經過Vue的數據劫持，創造了dep,在Vue實例中使用的話Watcher會收集依賴，以達到響應式的目的
  store._vm = new Vue({
    data: {
      $$state: state
    },
    computed
  })
  Vue.config.silent = silent

  // enable strict mode for new vm
  /* 使能嚴格模式，保證修改store只能經過mutation */
  if (store.strict) {
    enableStrictMode(store)
  }

  if (oldVm) {
    /* 解除舊vm的state的引用，以及銷燬舊的Vue對象 */
    if (hot) {
      // dispatch changes in all subscribed watchers
      // to force getter re-evaluation for hot reloading.
      store._withCommit(() => {
        oldVm._data.$$state = null
      })
    }
    Vue.nextTick(() => oldVm.$destroy())
  }
}

在這裏只要是把Vuex也構造爲響應式的，store._vm指向一個Vue的實例，藉助Vue數據劫持，創造了dep,在組件實例中使用的話Watcher會收集依賴，以達到響應式的目的。
至此，構造函數部分已通過了一遍了。