從零實現支持洋蔥模型中間件的 vuex

前言

剛開始看 redux 時候，reducer、store、dispatch、middleware 這些名詞都比較難以理解，後面接觸了 vuex 就比較好理解了。本章會從零開始實現一個簡單版本的狀態管理器。方便你們從此理解 vuex 和 redux 的狀態管理庫的源碼

什麼是狀態管理器

一個狀態管理器的核心思想是將以前放權到各個組件的修改數據層的 controller 代碼收歸一處，統一管理，組件須要修改數據層的話須要去觸發特定的預先定義好的 dispatcher，而後 dispatcher 將 action 應用到 model 上，實現數據層的修改。而後數據層的修改會應用到視圖上，造成一個單向的數據流。

簡單的狀態管理器

本文會一步步的編寫一個 Store 類，實現狀態的同步更新、異步更新、中間件等方法。

首先，咱們編寫一個 Store 類。

class Store {
  constructor({ state, mutations, actions }) {
    this._state = state
    this._mutations = {}
    this._actions = {}
    this._callbacks = []
  }
}

state 中存放全部須要的數據, mutaition 是更改 state 的惟一方法。 action 相似於 mutation, 不一樣在於，action 經過提交 mutation 來更改 state，action 能夠包含任意的異步操做。 這和 vuex 是同樣的。 當咱們更改 state 時，須要通知到訂閱者。這裏能夠實現發佈-訂閱模式來完成。callbacks 用來存放訂閱者的回調函數。下面咱們來一一實現這些方法。

Mutation

更改 Store 中 state 的惟一方法是提交 mutation，每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數,而後對 state 進行一些更改：

const state = {
  name: 'webb',
  age: 20,
  data: {}
}

const mutations = {
  changeAge(state, data) {
    state.age = data
  },
  changeData(state, data) {
    state.data = data
  }
}

接下來咱們實現把 state 做爲第一個參數傳遞給 mutation

function initMutation(state, mutations, store) {
  const keys = Object.keys(mutations)
  keys.forEach(key => {
    registerMutation(key, mutations[key], state, store)
  })
}

function registerMutation(key, handle, state, store) {
  // 提交 mutation 時 實際執行 store._mutations[key]函數，這個函數接受一個 data 參數
  // 而且實現了把 state 做爲第一個參數傳入回調函數中
  store._mutations[key] = function(data) {
    handle.call(store, state, data)
  }
}

改造一下 Store 類

class Store {
  constructor({ state, mutations, actions }) {
    this._state = state
    this._mutations = {}
    this._actions = {}
    this._callbacks = []
  }
}

Store.prototype._init = function (state, mutations, actions) {
  initMutation(this, mutations, state)
}

Store.prototype.commit = function(type, payload) {
  const mutation = this._mutations[type]
  mutation(payload)
}

// 獲取最新 state
Store.prototype.getState = function() {
  return this._state
}

const store = new Store({
  state,
  mutations
})

經過 commit 一個 mutation 來更新 state

console.log(store.getState()) // {name: 'webb', age: 20, data: {}}

store.commit('changeAge', 21)

console.log(store.getState()) // {name: 'webb', age: 21, data: {}}

到這裏咱們實現了當提交 mutation 的時候，會修改 state 的值，如今有一個問題擺在咱們面前，若是直接經過 this._state.xx = xx 也是能夠修改 state的值的。咱們應該避免直接修改state的值。那麼咱們能夠在修改 state 的時候作一層攔截，若是不是 mutation 修改的，就拋出錯。如今咱們嘗試用 es6 proxy 來解決這個問題。

class Store {
  constructor({ state, mutations, actions }) {
    this._committing = false  // 用來判斷是不是 commit mutation 觸發更新
    this._mutations = {}
    this._init(state, mutations, actions)
  }
}

Store.prototype._init = function (state, mutations, actions) {
  this._state = initProxy(this, state)
}

Store.prototype.commit = function(type, payload) {
  const mutation = this._mutations[type]
  this._committing = true
  mutation(payload)
  this._committing = false
}

// 對 state 的操做加入攔截，若是不是 commit mutation 就拋出錯誤
function initProxy(store,state) {
  return new Proxy(state, handle(store))
}

function handle(store) {
  return {
    get: function (target, key) {
      return Reflect.get(target, key)
    },
    set: function (target, key, value) {
      if (!store._committing) {
        throw new Error('只能經過 mutation 更改 state')
      }
      return Reflect.set(target, key, value)
    }
  }
}

Subscribe

上面咱們完成了對 state 數據的修改。接下來咱們實現，當 state 數據更新後，通知到相關 state 的使用者。

// 收集訂閱者
Store.prototype.subscribe = function (callback) {
  this._callbacks.push(callback)
}

// 修改 state 後， 觸發訂閱者的回調函數，並把舊的 state 和新的 state 做爲參數傳遞
Store.prototype.commit = function (mutationName, payload) {
  const mutation = this._mutations[mutationName]
  const state = deepClone(this.getStatus())
  this._committing = true
  mutation(payload)
  this._committing = false
  this._callbacks.forEach(callback => {
    callback(state, this._state)
  })
}

const store = new Store({
  state,
  mutations
})

store.subscribe(function (oldState, newState) {
  console.log('old', oldState)
  console.log('new', newState)
})

store.commit('changeAge', 21)
// old: { name: 'webb', age: 20, data: {} }
// new: { name: 'webb', age: 21, data: {} }

上面代碼中咱們使用發佈-訂閱模式，經過 subscribe 函數訂閱 state 的變化，在 mutation 執行完成後，調用訂閱者的回調函數，並把以前的 state 的 最新的 state 做爲參數返回。

actions

vuex 文檔中提到

一條重要的原則就是要記住 mutation 必須是同步函數 爲何？請參考下面的例子：

mutations: {
 someMutation (state) {
   api.callAsyncMethod(() => {
     state.count++
   })
 }
}

如今想象，咱們正在 debug 一個 app 而且觀察 devtool 中的 mutation 日誌。每一條 mutation 被記錄，devtools 都須要捕捉到前一狀態和後一狀態的快照。然而，在上面的例子中 mutation 中的異步函數中的回調讓這不可能完成：由於當 mutation 觸發的時候，回調函數尚未被調用，devtools 不知道何時回調函數實際上被調用——實質上任何在回調函數中進行的狀態的改變都是不可追蹤的

因此爲了處理異步操做，咱們須要實現 action。

const mutations = {
  changeData(state, data) {
    state.data = data
  }
}
const actions = {
  async getData({ commit }) {
    const data = await axios.get('http://ip-api.com/json')
    commit('changeData', data.data.status)
  }
}

function initAction(store, actions) {
  const keys = Object.keys(actions)

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

function registerAction(key, store, handle) {
  store._actions[key] = function (data) {
    // 把 commit 和 state 做爲參數傳遞給 action 的回調函數，當異步任務執行完成後，能夠 commit 一個 mutation 來更新 state
    let res = handle.call(store, { commit: store.commit.bind(store), state: store._state }, data)
    return res
  }
}

// action 經過 dispatch 來觸發, 並把更新後的 state 做爲 promise 的結果返回
Store.prototype.dispatch = function (actionName, payload) {
  return new Promise((resolve, reject) => {
    const action = this._actions[actionName]
    const self = this
    // action 異步操做返回 promise，當 promise 有結果時，獲取最新的 state 返回。
    action(payload).then(() => {
      resolve(this._state)
    })
  })
}

store.dispatch('getData').then(state => {
  console.log('dispatch success', state)
})

到這裏咱們已經實現了一個基本的狀態管理器。

中間件 middleware

如今有一個需求，在每次修改 state 的時候，記錄下來修改前的 state ，爲何修改了，以及修改後的 state。
這裏咱們模仿 koa 的洋蔥模型中間件來實現。

// 首先定義一個 middleware 類
class Middleware {
  constructor() {
    this.middlewares = []
    this.index = 0
  }

  use(middleware) {
    this.middlewares.push(middleware)
  }

  exec() {
    this.next()
  }

  next() {
    if (this.index < this.middlewares.length) {
      const middleware = this.middlewares[this.index]
      this.index++
      middleware.call(this, this.next.bind(this))
    } else {
      this.index = 0
    }
  }
}
// 每次 commit 的時候去執行中間件
Store.prototype.commit = function (mutationName, payload) {
  const mutation = this._mutations[mutationName]
  const state = deepClone(this.getStatus())
  execMiddleware(this) // 執行中間件
  this._committing = true
  mutation(payload)
  this._committing = false
  this._callbacks.forEach(callback => {
    callback(state, this._state)
  })
}

// 註冊中間件
store.$middlewares.use(async next => {
  console.log('start middleware', store.getStatus())
  await next()
  console.log('end middleware', store.getStatus())
})

store.commit('changeAge', 21)

// start middleware { name: 'webb', age: 20, data: {} }
// end middleware { name: 'webb', age: 20, data: {} }

中間件的完整代碼能夠查看 github

總結

好了，到這裏一個支持中間件模式的微型狀態管理庫已經實現了。固然 vuex 的源碼比這要複雜不少，但願經過本文能讓你更好的閱讀理解 vuex 的源碼。