【Vuex】9、Vuex-actions的详解

1、Mutation同步函数

• 通常情况下，Vuex要求我们Mutation中的方法必须是同步方法：
• 主要的原因是当我们使用devtools时，devtools可以帮助我们捕捉mutation的快照
• 但是如果是异步操作，那么devtools将不能很好的追踪这个操作什么时候会被完成
• 通常情况下，不要在mutation中进行异步的操作

2、Action的基本定义

• 我们强调。不要在mutation中进行异步操作
• 但是某些情况，我们确实希望在Vuex中进行一些异步操作，比如网络请求，必然是异步的，这个时候怎么处理呢？
• Action类似于Mutation，但是是用来替代mutation进行异步操作的
• Action的基本使用代码如下：
• context是什么：
• context是和store对象具有相同方法和属性的对象
• 也就是说，我们可以通过context去进行commit相关的操作，也可以获取context.state等
• 但是注意，这里它们并不是同一个对象，为什么呢？我们看Modules的时候，再具体说
• 这样的代码是否多此一举呢？
• 我们定义了action，然后又在actions中去进行commit，这不是脱裤子放屁吗？
• 事实上并不是这样，如果在Vuex中有异步操作，那么我们就可以在actions中完成了

3、Action的分发

• 在Vue组件中，如果我们调用action中的方法，那么久必须使用dispatch

• 同样的，也是支持传递payload

4、Action返回的Promise

• 前面我们学习ES6语法的时候说过，Promise经常用于异步操作
• 在Action中，我们可以将异步操作放在一个Promise中，并且在成功或者失败后，调用对应的resolve或reject

总结：

actions相当于是mutations，只不过是不能mutations进行异步操作，所以我们需要在actions里面进行异步操作，我们在actions定义的方法，携带两个参数

一个是context【上下文】,payload【载荷】，其中context.commit(mutations的方法)，payload可以使多个参数以字典{}的形式携带，也可以跟一个参数

在组件中调用时，如果是异步操作，我们就需要去调用dispatch(actions的方法)；

我们和Promise结合使用可以如下：

actions:{
	xxx(context, payload){
    	return new Promise((resolve, reject) => {
        	setTimeout(()=> {
            	context.commit(mutations的方法),
                resolve(返回给外界的参数，可不携带)
            })
        })
    }
}


# 组件调用的时候

this.$store.dispatch(actions方法名, 携带参数).then(res=>{
	然后进行下一步处理
})