Vuex 核心属性(中)

Mutation同步函数：

在mutations 中 使用异步操作的话，页面上devtools工具无法跟踪信息。

所以在mutations中的方法必须是同步方法

Action的基本定义

我们强调，不要再mutation中进行异步操作，但再某些情况下，我们确实希望再vuex中使用异步操作（网络请求等）

那么我们就可以使用Action了，Action类似于Mutation，但是是用来代替Mutation进行异步操作的，传递参数使用  payload

我们知道了，在mutation中我们只能通过commit（提交）的方式，那么在Action中呢？

在Action中我们只能通过dispatch（）来寻找Action中的方法！

举个例子：

在store文件中的index.js文件中
我们通过setTime的方式模拟一下，通过action的异步操作
//context ==> 定义的参数（注意，这里最好就写context）  上下文的意思   它等同于 store
actions：{
　　　//aUpdInfo：自定义的方法名，在其他页面中需要使用，建议也定义成常量，通过【types.AUPDINFO】的方式调用
     aUpdInfo(context){
      setTimeout(()=>{
　　　　 //调用commit方法，因为，在官方提供的图中我们可以得知，mutation这给过程是不可跳过的
　　　　 //，否则就无法使用vue浏览器插件监听了，而mutation中的方法只有通过commit传递
        context.commit('updInfo')
      },1000) 
    })     
}    

在App.vue文件中，我们调用action中的方法
上文中提到，需要用dispatch（）方法。看下吧的代码吧
//updInfo:我们定义的方法名
updInfo(){
　　this.$store.dispatch('aUpdInfo')
}

　根据以上代码我们可以看到组件中使用Vuex时，并且进行异步操作时，先通过dispatch进入了action中，再action中处理了异步之后，再进入mutation中

那么关于action中传参，我这有个例子：

actions：{
　　　//传递过来的参数建议使用payload接收
     aUpdInfo(context,payload){
      setTimeout(()=>{
　　　　 //调用commit方法，因为，在官方提供的图中我们可以得知，mutation这给过程是不可跳过的
　　　　 //，否则就无法使用vue浏览器插件监听了，而mutation中的方法只有通过commit传递
       　　 console.log(payload)//打印传递过来的参数
　　　　　　 context.commit('updInfo')
　　　　},1000) 
    })     
}    

在App.vue文件中，我们调用action中的方法
//updInfo:我们定义的方法名
updInfo(){
　　this.$store.dispatch('aUpdInfo','我是要去action中的参数值')
}

上面的是一个单纯的传递字符串参数，那么传递其他的参数，比如说需要回调那么该怎么做呢？

在这里我们就可以使用Promise来进行处理。看下边的例子：

actions：{
　　　//传递过来的参数建议使用payload接收
     aUpdInfo(context,payload){
　　　　return new Promise((reslove,reject)=>{

          setTimeout(()=>{
　　　　      //调用commit方法，因为，在官方提供的图中我们可以得知，mutation这给过程是不可跳过的
　　　　      //，否则就无法使用vue浏览器插件监听了，而mutation中的方法只有通过commit传递
       　　    console.log(payload)//打印传递过来的参数
　　　　　　     context.commit('updInfo')
　　　　    　　　resolve('我是传过去的有一个参数哟')
　　　　　　　　},1000) 

　　　　})
    })     
}    

在App.vue文件中，我们调用action中的方法
//updInfo:我们定义的方法名
  updInfo(){
　  　this.$store.dispatch('aUpdInfo','我是要去action中的参数值').then((res)=>{
　　　　　console.log('里面的操作完成咯')
　　　　 console.log(res)　　　　　
  　　})
}

从上面那个例子里面我们可以看到，通过Promise,我们可以在action中发生请求的地方，.then。处理回调