前言

在 mutation 中混合異步調(diào)用會(huì)導(dǎo)致你的程序很難調(diào)試。例如，當(dāng)你調(diào)用了兩個(gè)包含異步回調(diào)的 mutation 來(lái)改變狀態(tài)，你怎么知道什么時(shí)候回調(diào)和哪個(gè)先回調(diào)呢？這就是為什么我們要區(qū)分這兩個(gè)概念。在 Vuex 中，mutation 都是同步事務(wù)：

store.commit('add')// 任何由 "add" 導(dǎo)致的狀態(tài)變更都應(yīng)該在此刻完成。

因此，Action 就出現(xiàn)了。

一、什么是 Action

Action 類(lèi)似于 mutation ，不同在于：

• Action 提交的是 mutation，而不是直接變更狀態(tài)。
• Action 可以包含任意異步操作。

讓我們來(lái)注冊(cè)一個(gè)簡(jiǎn)單的 action：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add(state) {
      state.count++
    }
  },
  actions: {
    add(context) {
      context.commit('add')
    }
  }
})

Action 函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象，因此你可以調(diào)用 context.commit 提交一個(gè) mutation，或者通過(guò) context.state 和 context.getters 來(lái)獲取 state 和 getters。當(dāng)我們?cè)谥蠼榻B到 Modules 時(shí)，你就知道 context 對(duì)象為什么不是 store 實(shí)例本身了。

實(shí)踐中，我們會(huì)經(jīng)常用到 ES2015 的 參數(shù)解構(gòu) (opens new window)來(lái)簡(jiǎn)化代碼（特別是我們需要調(diào)用 commit 很多次的時(shí)候）：

actions: {
  add({ commit }) {
    commit('add')
  }
}

二、分發(fā) Action（調(diào)用 Action）

Action 通過(guò) store.dispatch 方法觸發(fā)：

store.dispatch('add')

乍一眼看上去感覺(jué)多此一舉，我們直接分發(fā) mutation 豈不更方便？實(shí)際上并非如此，因?yàn)?mutation 必須同步執(zhí)行.。Action 就不受約束！我們可以在 action 內(nèi)部執(zhí)行異步操作：

actions: {
  addAsync ({ commit }) {
    setTimeout(() => {
      commit('add')
    }, 1000)
  }
}

Actions 支持同樣的 載荷方式和對(duì)象方式進(jìn)行分發(fā)：

// 以載荷形式分發(fā)
store.dispatch('addAsync', {
  amount: 10
})

// 以對(duì)象形式分發(fā)
store.dispatch({
  type: 'addAsync',
  amount: 10
})

三、在組件中分發(fā) Action

在組件中使用 this.$store.dispatch('xxx') 分發(fā) action，或者使用 mapActions 輔助函數(shù)將組件的 methods 映射為 store.dispatch 調(diào)用（需要先在根節(jié)點(diǎn)注入 store）：

// main.js
// 根節(jié)點(diǎn)引入store
new Vue({
  el: '#app',
  store
})

// 組件
import { mapActions } from 'vuex'

export default {
  methods: {
     // 將 `this.add()` 映射為 `this.$store.dispatch('add')`
     // `mapActions` 也支持載荷：
     // 將 `this.addBy(amount)` 映射為 `this.$store.dispatch('addBy', amount)`
    ...mapActions(['add', 'addBy']),
    // 將 `this.increment()` 映射為 `this.$store.dispatch('add')`
    ...mapActions({
      increment: 'add' 
    })
  }
}

四、組合 Action

Action 通常是異步的，那么如何知道 action 什么時(shí)候結(jié)束呢？更重要的是，我們?nèi)绾尾拍芙M合多個(gè) action，以處理更加復(fù)雜的異步流程？

首先，你需要明白 store.dispatch 可以處理被觸發(fā)的 action 的處理函數(shù)返回的 Promise，并且 store.dispatch 仍舊返回 Promise：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

現(xiàn)在你可以調(diào)用

store.dispatch('actionA').then(() => {
  // 成功操作
})

在另外一個(gè) action 中也可以：

actions: {
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

最后，如果我們利用 async / await我們可以如下組合 action：

// 假設(shè) getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

一個(gè)store.dispatch 在不同模塊中可以觸發(fā)多個(gè) action 函數(shù)。在這種情況下，只有當(dāng)所有觸發(fā)函數(shù)完成后，返回的 Promise 才會(huì)執(zhí)行。

到此這篇關(guān)于Vuex之Action的使用方法詳解的文章就介紹到這了,更多相關(guān)Vuex的Action內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論