前两篇文章分析了获取状态的两个Api,这一篇分析一下派发
action
的Api————mapActions
mapActions
mapActions
也可以以数组或者对象作为参数,其内部调用的依然是this.$store.dispatch
来派发action
,看下面这个函数有个主意点就是...args
,它其实就是我们在开发时传给mapActions
中方法的参数,也就是this.increment(1)
中的这个1
1 | const mapActions = normalizeNamespace((namespace, actions) => { |
mapActions在Vue组件中的应用
1 | <template> |
用法跟之前分析的mapState
、mapGetters
类似,当然也可以传入对象进行映射,即mapActions({add: 'increment'})
,这样调用add
方法也就相当于调用了increment
方法。
总结
mapActions
的用法及原理上面已经说了,这里就不在阐述了。因为action
支持异步操作,看过前面对Store
的源码分析之后可以知道,action
是可以合并的,同时dispatch
返回的是Promise
,所以在处理等待某个请求之后再执行下一个请求的这种操作时,可以使用以下的方式:
1 | actions: { |
如果应用async/await
时的写法如下:
1 | // 假设 getData() 和 getOtherData() 返回的是 Promise |
总结部分参考:Vuex
官方文档,链接:https://vuex.vuejs.org/zh/guide/actions.html