Actions如何定義的
恕小端不才，對Action的總結如下：
- Action 可以提交mutation方法，通過mutation來改變state
- Action 函式可以接收一個context物件，通過context.state 和 context.getters來改變state。（在實際工作中不常用）
- Action 可以執行任意的同步和非同步操作
接下來我們通過上面三點總結來看Actions的使用：
Action 可以提交mutation方法，通過mutation來改變state
我們先在actions.js定義一個addCountAction方法用來做累加器
const actions = {
addNumAction (context, num) {
context.commit('addNum', num)
},
addCountAction (context) {
context.commit('add')
}
}
export default actions
複製程式碼在元件中通過.dispatch進行分發Actions，內容如下：
<template>
<div class="action">
<p>{{ count }}</p>
<button @click="add">+ADD</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapState(['count'])
},
methods: {
add () {
this.$store.dispatch('addCountAction')
}
}
}
</script>
複製程式碼Action 函式可以接收一個context物件，通過context.state 和 context.getters來改變state。（不推薦使用）
在actions.js中定義一個新方法reduceCountAction方法，實現一個累減
const actions = {
addNumAction (context, num) {
context.commit('addNum', num)
},
addCountAction (context) {
context.commit('add')
},
reduceCountAction (context) {
context.state.count--
}
}
export default actions
複製程式碼在元件中通過.dispatch進行分發Actions，內容如下：
<template>
<div class="action">
<button @click="reduce">-REDUCE</button>
<p>{{ count }}</p>
<button @click="add">+ADD</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapState(['count'])
},
methods: {
add () {
this.$store.dispatch('addCountAction')
},
reduce () {
this.$store.dispatch('reduceCountAction')
}
}
}
</script>
複製程式碼Action 可以執行任意的同步和非同步操作
我們將actions.js中的addCountAction函式修改如下：
addCountAction (context) {
setTimeout(function () {
context.commit('add')
}, 2000)
}
複製程式碼修改後我們發現在執行累加的時候，會等待兩秒才會執行。
在元件中使用mapActions 輔助函式
將之前的元件addCountAction函式用輔助函式替代，修改如下：
<template>
<div class="action">
<button @click="reduce">-REDUCE</button>
<p>{{ count }}</p>
<button @click="addCountAction">+ADD</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapState(['count'])
},
methods: {
...mapActions(['addCountAction']),
reduce () {
this.$store.dispatch('reduceCountAction')
}
}
}
</script>
複製程式碼組合Actions的使用
Action通常是非同步的，那麼如何知道action什麼時候結束呢？更重要的是，我們如何才能組合多個action，以處理更加複雜的非同步流程？
首先，你需要明白 store.dispatch 可以處理被觸發的 action 的處理函式返回的 Promise，並且 store.dispatch 仍舊返回 Promise：
const actions = {
addNumAction (context, num) {
context.commit('addNum', num)
},
addCountAction (context) {
return new Promise((resolve, reject) => {
setTimeout(() => {
context.commit('add')
resolve()
}, 1000)
})
},
reduceCountAction (context) {
context.state.count--
},
addTwoAction (context) {
context.dispatch('addCountAction').then(() => {
context.commit('addTwo')
})
}
}
export default actions
複製程式碼在上面我們在addTwoAction函式中實現了一個組合的actions
- 如果我們利用 async / await，我們可以如下組合 action
// 假設 getData() 和 getOtherData() 返回的是 Promise
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}
複製程式碼一個store.dispatch在不同模組中可以觸發多個action函式。在這種情況下，只有當所有觸發函式完成後，返回的Promise才會執行。
最後，我們說下官方的定義，在官網是這樣定義的Actions：
- Action 類似於 mutation，不同在於：
- Action 提交的是 mutation，而不是直接變更狀態。
- Action 可以包含任意非同步操作。