vuex 2.0 源碼解讀

時間 2019-12-07

標籤 vuex 2.0 源碼解讀简体版

原文原文鏈接

準備工做

1.下載安裝運行

這裏以2.0.0-rc.6爲例
官網github下載連接(對應版本):https://github.com/vuejs/vuex...
點擊下載到本地
按照readme.mdjavascript

$ npm install
$ npm run dev # serve examples at localhost:8080

2.example示例

查看package.json dev命令,html

"dev": "node examples/server.js"

打開http://localhost:8080/
examples裏面的文件都能運行了,
Counter,
Counter with Hot Reload,
Shopping Cart,
TodoMVC,
FluxChat 這些每個有頗有表明性vue

源碼 src/index.js

vuex 只暴露出了6個方法java

export default {
  Store,
  install,
  mapState,
  mapMutations,
  mapGetters,
  mapActions
}

1.install方法

install函數用於vue
vue.use() 裏會調用自動install方法node

function install (_Vue) {
  if (Vue) {
    console.error(
      '[vuex] already installed. Vue.use(Vuex) should be called only once.'
    )
    return
  }
  Vue = _Vue
  applyMixin(Vue)
}
  applyMixin(Vue){
    // ...
    function vuexInit () {
        const options = this.$options
        // store injection
        if (options.store) {
          this.$store = options.store
        } else if (options.parent && options.parent.$store) {
          this.$store = options.parent.$store
        }
      }
}

new Vue({store})傳進去一個store對象,在new Vue()的時候對options進行了處理react

vm.$options.store =  store
    // 把傳入的對象除了$el都掛在了$options下
    // 參考vue源碼對options處理部分

這樣作git

if (options.store) {
     // 這樣在 vue 裏全局裏經過 $store可以訪問store對象
     this.$store = options.store
 }

2.Store構造函數

class Store {
  constructor (options = {}) {assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
    assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
    // options解構賦值
    const {
      state = {},
      plugins = [],
      strict = false
    } = options
    
    // store internal state
    this._options = options
    this._committing = false
    this._actions = Object.create(null)
    this._mutations = Object.create(null)
    this._wrappedGetters = Object.create(null)
    this._runtimeModules = Object.create(null)
    this._subscribers = []
    this._watcherVM = new Vue()

    // bind commit and dispatch to self
    const store = this
    // dispatch, commit 解構賦值
    const { dispatch, commit } = this
    // dispatch改變this,使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 
    this.strict = strict
    
    // 對傳入module的處理
    // init root module.
    // this also recursively registers all sub-modules
    // and collects all module getters inside this._wrappedGetters
    installModule(this, state, [], options)

    // initialize the store vm, which is responsible for the reactivity
    // (also registers _wrappedGetters as computed properties)
    resetStoreVM(this, state)

    // apply plugins
    plugins.concat(devtoolPlugin).forEach(plugin => plugin(this))
    }
}

get state () {
     //返回state,state掛在在stare.vm下
    return this._vm.state
  }

  set state (v) {
    //不能被外部改變,私有變量
    assert(false, `Use store.replaceState() to explicit replace store state.`)
  }

3.installModule函數

installModule(this, state, [], options)github

function installModule (store, rootState, path, module, hot) {
 // 若是path爲[]那麼isRoot爲tree
  const isRoot = !path.length
 // 把傳入的options請求解構賦值,
  const {
    state,
    actions,
    mutations,
    getters,
    modules
  } = module

  // hot不存在並且path不爲[]
  // set state
  if (!isRoot && !hot) {
    const parentState = getNestedState(rootState, path.slice(0, -1))
    const moduleName = path[path.length - 1]
    store._withCommit(() => {
      Vue.set(parentState, moduleName, state || {})
    })
  }

  if (mutations) {
    Object.keys(mutations).forEach(key => {
      registerMutation(store, key, mutations[key], path)
    })
  }

  if (actions) {
    Object.keys(actions).forEach(key => {
      registerAction(store, key, actions[key], path)
    })
  }

  if (getters) {
    wrapGetters(store, getters, path)
  }

  if (modules) {
    //注意 只有傳遞了modules 纔會執行if (!isRoot && !hot)後面的處理,這裏對path.concat(key)進行了處理
    Object.keys(modules).forEach(key => {
      installModule(store, rootState, path.concat(key), modules[key], hot)
    })
  }
}

這裏有個很重要的概念要理解，什麼是 path. vuex 的一個 store 實例能夠拆分紅不少個 module ,不一樣的 module 能夠理解成一個子代的 store 實例（事實上，module 確實和 store 具備同樣的結構）,這是一種模塊化的概念。所以這裏的 path 能夠理解成是表示一種層級關係(樹狀)，當你有了一個 root state 以後，根據這個 root state 和 path 能夠找到 path 路徑對應的一個 local state，每個 module 下的 mutations 和 actions 改變的都是這個local state，而不是 root state.vuex

看一下 getNestedState方法npm

/*
 * state: Object, path: Array
 * 假設path = ['a', 'b', 'c']
 * 函數返回結果是state[a][b][c]
 */
function getNestedState (state, path) {
  return path.length
    ? path.reduce(function (state, key) { return state[key]; }, state)
    : state
}

這裏學習一下reduce的妙用 reduce不清楚的 mdn傳送門點我

/** handler是傳入的mutation[key]方法好比
   increment (state) {
       state.count++
   },
   decrement (state) {
       state.count--
   }
   type就是key increment, decrement
  **/

registerMutation函數
----------------

function registerMutation (store, type, handler, path = []) {
  const entry = store._mutations[type] || (store._mutations[type] = [])
  entry.push(function wrappedMutationHandler (payload) {
    handler(getNestedState(store.state, path), payload)
  })
}

全部的 mutations 都通過處理後，保存在了 store._mutations 對象裏。 _mutations 的結構爲

_mutations: {
    increment: [function wrappedMutationHandler(payload){increment(store.state.modules){...}}, ...],
    decrement: [function wrappedMutationHandler(payload){decrement(store.state.modules, payload){...}}, ...],
    ...
}

這個對應第一個參數爲該模塊下的state對象,若是沒有modules就是rootState,
第二個參數就是payload 用戶自定義傳遞的參數

increment (state) 
        state.count++
      },
      decrement (state) {
        state.count--
      }

同理

4.registerAction函數

function registerAction (store, type, handler, path = []) {
  const entry = store._actions[type] || (store._actions[type] = [])
  const { dispatch, commit } = store
  entry.push(function wrappedActionHandler (payload, cb) {
    let res = handler({
      dispatch,
      commit,
      getters: store.getters,
      state: getNestedState(store.state, path),
      rootState: store.state
    }, payload, cb)
    if (!isPromise(res)) {
      // 返回 Promise
      res = Promise.resolve(res)
    }
    if (store._devtoolHook) {
      return res.catch(err => {
        store._devtoolHook.emit('vuex:error', err)
        throw err
      })
    } else {
      return res
    }
  })
}

被處理成

_actions: {
    increment: [function wrappedActionHandler(payload){increment({
      dispatch,
      commit,
      getters: store.getters,
      state: getNestedState(store.state, path),
      rootState: store.state
    }){...}}, ...],
    decrement: [function wrappedActionHandler(payload){decrement({
      dispatch,
      commit,
      getters: store.getters,
      state: getNestedState(store.state, path),
      rootState: store.state
    }, payload){...}}, ...],
    ...
}

第一個參數傳入一個對象,因此才能使用commit方法

const actions = {
  increment: ({ commit }) => commit('increment'),
  decrement: ({ commit }) => commit('decrement')
}

5.commit和dispatch

commit爲同步,dispatch爲異步,當全部執行完畢返回Promise

commit (type, payload, options) {
    // check object-style commit
    if (isObject(type) && type.type) {
      options = payload
      payload = type
      type = type.type
    }
    const mutation = { type, payload }
    const entry = this._mutations[type]
    if (!entry) {
      console.error(`[vuex] unknown mutation type: ${type}`)
      return
    }
    this._withCommit(() => {
      entry.forEach(function commitIterator (handler) {
        handler(payload)
      })
    })
    if (!options || !options.silent) {
      this._subscribers.forEach(sub => sub(mutation, this.state))
    }
  }

  dispatch (type, payload) {
    // check object-style dispatch
    if (isObject(type) && type.type) {
      payload = type
      type = type.type
    }
    const entry = this._actions[type]
    if (!entry) {
      console.error(`[vuex] unknown action type: ${type}`)
      return
    }
    return entry.length > 1
      ? Promise.all(entry.map(handler => handler(payload)))
      : entry[0](payload)
  }

6.wrapGetters

// store增長一個 _wrappedGetters 屬性
function wrapGetters (store, moduleGetters, modulePath) {
  Object.keys(moduleGetters).forEach(getterKey => {
    const rawGetter = moduleGetters[getterKey]
    if (store._wrappedGetters[getterKey]) {
      console.error(`[vuex] duplicate getter key: ${getterKey}`)
      return
    }
    store._wrappedGetters[getterKey] = function wrappedGetter (store) {
      return rawGetter(
        getNestedState(store.state, modulePath), // local state
        store.getters, // getters
        store.state // root state
      )
    }
  })
}

注意這裏的全部 getters 都儲存在了全局的一個 _wrappedGetters 對象中，一樣屬性名是各個 getterKey ,屬性值一樣是一個函數，執行這個函數，將會返回原始 getter 的執行結果。

7.resetStoreVM

function resetStoreVM (store, state) {
  const oldVm = store._vm

  //...
  Object.keys(wrappedGetters).forEach(key => {
    const fn = wrappedGetters[key]
    // use computed to leverage its lazy-caching mechanism
    computed[key] = () => fn(store)
    Object.defineProperty(store.getters, key, {
      get: () => store._vm[key]
    })
  })

   //...
  store._vm = new Vue({
    data: { state },
    computed
  })

  if (oldVm) {
    // dispatch changes in all subscribed watchers
    // to force getter re-evaluation.
    store._withCommit(() => {
      oldVm.state = null
    })
    Vue.nextTick(() => oldVm.$destroy())
  }
}

着重講一下最重要的

store._vm = new Vue({
    data: { state },
    computed
  })

state是放在vue實例對象的 this.data.state 裏面的
這個 new Vue 和你日常的new Vue不同,這是兩個vue實例,數據不共用
之因此掛在在vue是方便使用vue的一些方法nextTick,set等,更方便控制state狀態
因此在vue組件裏若是不寫

computed:{
     ...mapState(["count"])
 },

就不能直接寫 template 裏寫{{count}} 而必須使用 this.$store.state.count

map輔助函數

normalizeMap

/*
 * 若是map是一個數組 ['type1', 'type2', ...]
 * 轉化爲[
 *   {
 *     key: type1,
 *     val: type1
 *   },
 *   {
 *     key: type2,
 *     val: type2
 *   },
 *   ...
 * ]
 * 若是map是一個對象 {type1: fn1, type2: fn2, ...}
 * 轉化爲 [
 *   {
 *     key: type1,
 *     val: fn1
 *   },
 *   {
 *     key: type2,
 *     val: fn2
 *   },
 *   ...
 * ]
 */
function normalizeMap (map) {
  return Array.isArray(map)
    ? map.map(function (key) { return ({ key: key, val: key }); })
    : Object.keys(map).map(function (key) { return ({ key: key, val: map[key] }); })
}

normalizeMap 函數接受一個對象或者數組，最後都轉化成一個數組形式，數組元素是包含 key 和 value 兩個屬性的對象。

map

export function mapState (states) {
  const res = {}
  normalizeMap(states).forEach(({ key, val }) => {
    res[key] = function mappedState () {
      return typeof val === 'function' //是函數,執行返回結果
        ? val.call(this, this.$store.state, this.$store.getters)
        : this.$store.state[val] // 不是,返回$store.state[val]值
    }
  })
  return res
}

export function mapMutations (mutations) {
  const res = {}
  normalizeMap(mutations).forEach(({ key, val }) => {
    res[key] = function mappedMutation (...args) {
      // 經過commit執行Mutation裏的函數和本身用$store.commit()執行結果是同樣,定義一個方法,用戶使用起來更方便
      return this.$store.commit.apply(this.$store, [val].concat(args))
    }
  })
  return res
}
//這裏 getters 一樣接受一個數組，一樣返回一個對象
export function mapGetters (getters) {
  const res = {}
  normalizeMap(getters).forEach(({ key, val }) => {
    res[key] = function mappedGetter () {
      if (!(val in this.$store.getters)) {
        console.error(`[vuex] unknown getter: ${val}`)
      }
      return this.$store.getters[val]
    }
  })
  return res
}


export function mapActions (actions) {
  const res = {}
  normalizeMap(actions).forEach(({ key, val }) => {
    res[key] = function mappedAction (...args) {
     // 同mapMutations
      return this.$store.dispatch.apply(this.$store, [val].concat(args))
    }
  })
  return res
}

map* 方法，這四種方法能夠都返回一個對象，因此在vue裏咱們可以使用...

computed:{
     ...mapState(["count"])
 }

小結

【單一狀態樹】
vuex 使用單一狀態樹——用一個對象就包含了所有的應用層級狀態。至此它便做爲一個「惟一數據源 (SSOT)」而存在。這也意味着，每一個應用將僅僅包含一個 store 實例。單一狀態樹可以直接地定位任一特定的狀態片斷，在調試的過程當中也能輕易地取得整個當前應用狀態的快照

每個 Vuex 應用的核心就是 store（倉庫）。「store」基本上就是一個容器，它包含着應用中大部分的狀態 (state)。Vuex 和單純的全局對象有如下兩點不一樣：

　　一、Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新

　　二、不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation。這樣使得能夠方便地跟蹤每個狀態的變化，從而可以實現一些工具幫助更好地瞭解應用
Vuex 背後的基本思想，借鑑了 Flux、Redux和 The Elm Architecture

參考
vuex 2.0源碼解讀（一）
Flux 架構入門教程
 Vue狀態管理vuex