Action

Action 類似于 mutation，不同在于：

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

讓我們來注冊一個(gè)簡單的 action：

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

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

實(shí)踐中，我們會(huì)經(jīng)常用到 ES6 的變量的解構(gòu)賦值簡化代碼（特別是我們需要調(diào)用 commit 很多次的時(shí)候）：

actions: {increment ({ commit }) {commit('increment')} } 解釋：context實(shí)際為一個(gè)對(duì)象，對(duì)象中包含{state, getters,commit}等等屬性，使用ES6的對(duì)象的解構(gòu)賦值可以簡化寫法。 例子： let { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb"

對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同。數(shù)組的元素是按次序排列的，變量的取值由它的位置決定；而對(duì)象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

分發(fā) Action

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

store.dispatch('increment')

乍一眼看上去感覺多此一舉，我們直接分發(fā) mutation 豈不更方便？實(shí)際上并非如此，還記得 mutation 必須同步執(zhí)行這個(gè)限制么？Action 就不受約束！我們可以在 action 內(nèi)部執(zhí)行異步操作：

actions: {incrementAsync ({ commit }) {setTimeout(() => {commit('increment')}, 1000)} }

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

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

來看一個(gè)更加實(shí)際的購物車示例，涉及到調(diào)用異步 API 和分發(fā)多重 mutation：

actions: {checkout ({ commit, state }, products) {// 把當(dāng)前購物車的物品備份起來const savedCartItems = [...state.cart.added]// 發(fā)出結(jié)賬請(qǐng)求，然后樂觀地清空購物車commit(types.CHECKOUT_REQUEST)// 購物 API 接受一個(gè)成功回調(diào)和一個(gè)失敗回調(diào)shop.buyProducts(products,// 成功操作() => commit(types.CHECKOUT_SUCCESS),// 失敗操作() => commit(types.CHECKOUT_FAILURE, savedCartItems))} }

注意我們正在進(jìn)行一系列的異步操作，并且通過提交 mutation 來記錄 action 產(chǎn)生的副作用（即狀態(tài)變更）。

在組件中分發(fā) Action

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

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

組合 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)在你可以：

store.dispatch('actionA').then(() => {// ... })

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

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

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

// 假設(shè) getData() 和 getOtherData() 返回的是 Promiseactions: {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í)行。

總結(jié)

以上是生活随笔為你收集整理的Vue2.x—理解vuex核心概念action（使用到ES6的变量的解构赋值）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。