Vuex之理解Actions

理解Actions

1.什麼是actions？

• 背景：在mutation中咱們講到，mutation中是存放處理數據的方法的集合，咱們使用的時候須要commit。可是commit是同步函數，並且只能是同步執行。那咱們想一步操做怎麼辦？

• 做用：在actions中提交mutation，而且能夠包含任何的異步操做。actions能夠理解爲經過將mutations裏面處裏數據的方法變成可異步的處理數據的方法，簡單的說就是異步操做數據（可是仍是經過mutation來操做，由於只有它能操做）

---

2.怎麼用actions？

• 定義actions

  const store = new Vuex.Store({//建立store實例
        state: {
           count: 0
               },
        mutations: {                
           increment (state) {
            state.count++
           }
            },
        actions: {         //只是提交`commit`了`mutations`裏面的方法。
           increment (context) {
            context.commit('increment')
     }
   }
      })
     
    通常咱們會簡寫成這樣
    actions: {
     increment ({ commit }) {
           commit('increment')
        }
           }

• 分發actions

  store.dispatch('increment')

• MapActions和MapState一級MapMutations相似。

---

3.源碼分析

• registerAction():初始化action，和registerMutation相似，不一樣的地方是mutation是同步的修改當前模塊的state，action是能夠異步的去修改。可是仍是經過提交mutation來修改，必須明白在Vuex中只又mutation能修改state。

  function registerAction (store, type, handler, path = []) {
    const entry = store._actions[type] || (store._actions[type] = [])
    //經過types拿到action的對象數組
    const { dispatch, commit } = store
    entry.push(function wrappedActionHandler (payload, cb) {
    //包裝action成一個函數，payload表示載荷，並傳入一個對象，
    let res = handler({ 
     dispatch,
     commit,
     getters: store.getters,
     state: getNestedState(store.state, path),
     rootState: store.state
    }, payload, cb)
   if (!isPromise(res)) {
   //若是不是promise對象，就包裝成Promise對象，這也就是前面分析store的時候，斷言函數要判斷是否存在promise。
     res = Promise.resolve(res)
    }
   if (store._devtoolHook) {
     return res.catch(err => {
       store._devtoolHook.emit('vuex:error', err)
       throw err
     })
   } else {
     return res
   }
    })
    }

• dispatch():分發actions

  dispatch (type, payload) {
    //判斷type是不是對象類型
  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)))
    //在 action 的回調函數裏，能夠拿到當前模塊的上下文包括 store 的 commit 和 dispatch 方法、getter、當前模塊的 state 和 rootState
    : entry[0](payload)
    }