vue高级7-action、async、await、vuex辅助工具

action与mutation类似,但是action支持异步
在main.js的mutations里面写一个方法叫做add,这里用了es6的参数结构(https://blog.csdn.net/RUCwang/article/details/83002819)
vue高级7-action、async、await、vuex辅助工具_第1张图片
用dispatch传递一下actions的内容(类似于mutations的commit),后面可以加.then()
vue高级7-action、async、await、vuex辅助工具_第2张图片

es7的写法:在函数名字前面写上async表示异步操作(不单单是actions里面的函数,任何函数都可以在前面加一个async,加了async就表示是异步操作),async一般与await一起用,await后面就是异步操作的事情,跟一个promise来保证我做了这件事情,后面的事情是基于这件事的基础上再执行下面的事情的(解决异步问题)
vue高级7-action、async、await、vuex辅助工具_第3张图片
官网:https://vuex.vuejs.org/zh/guide/actions.html
vue高级7-action、async、await、vuex辅助工具_第4张图片

vuex中的辅助函数:https://www.jianshu.com/p/46ed0316c31b
mapState: import mapState from ‘vuex’
组件中:computed:mapState([‘mydata’]),或者,…mapState({ }) 这个是把函数名展开
这只适用于属性名与state函数名相同的时候用
mapGetters,mapMutations,mapActions

你可能感兴趣的:(vue高级7-action、async、await、vuex辅助工具)