actions的使用详解

actions的使用详解

为何要有actions环节

我们之前学了vuex状态管理,组件可以引用state,但是不能直接修改state,比如发送操作到actions,在此执行异步操作,然后再提交mutation来修改state.如果没有异步操作可以直接提交到mutation跳过actions步骤。

在mutation这里devtools插件可以用来监控state状态改变记录。如果有异步操作不通过actions直接到mutations就会无法捕捉。

所以mutaions中的方法必须是同步方法,不能有异步操作

updateInfo(state) {
  setTimeout(()=>{
      state.info.name='v587'
  },1000)
}

在之前的更新信息方法内写上定时器模拟异步操作

actions的使用详解_第1张图片

这就是在mutations里写异步操作的弊端。

增加actions环节

增加不是替代,不要试图在action里直接操作state,那样就是替代了mutation的工作。我们只是为了将异步操作分离开来,放到此处单独处理。

所以getters和mutations的默认参数都是state,而actions参数确是context

具体的步骤

组件发送请求给actions

updateInfo() {
  //this.$store.commit('updateInfo')
  this.$store.dispatch('aUpdateInfo')
}

当然也可以发送参数跟在函数名后,或者直接将dispatch参数写成对象形式。

和mutations提交规则是一样的。

updateInfo(count) {
  //this.$store.commit('updateInfo')
  this.$store.dispatch({
    type:'aUpdateInfo',
     count
  })
}
actions执行异步操作后提交到mutations
actions: {
  //默认参数context:上下文
  aUpdateInfo(context,count){
    setTimeout(()=>{
      context.commit('updateInfo')
      console.log(count.count)
    },1000)
  }
},
mutations修改state
   updateInfo(state) {
      state.info.name='qcl'
    }
有一个需求

我们异步操作,修改成功后,要告诉组件已经修改成功,然后组件进行下一步操作。当我们在actions里commit的时候如果没有报错,就可以认为提交成功。

我们此时可以直接在组件里调用actions方法时传入一个函数

updateInfo(count) {
  //this.$store.commit('updateInfo')
  this.$store.dispatch({
    type:'aUpdateInfo',
     count,
    success:()=>console.log('完成异步操作')
  })
}
actions: {
  //默认参数context:上下文
  aUpdateInfo(context,count){
    setTimeout(()=>{
      context.commit('updateInfo')
      console.log(count.count)
      count.success()
    },1000)
  }
},

如果异步操作成功后回调success函数即可。

记住如果dispatch和commit方法参数都是对象,那么接受的方法的参数也是对象。

那这样不又是之前的问题,异步操作代码和业务代码放到了一起,显得结构十分杂乱。

我们不是学过promise吗

aUpdateInfo(context,count){
 new Promise(resolve => {
    setTimeout(()=>{
      context.commit('updateInfo')
      resolve(count)
    },1000)
  }).then(res=>{
    console.log(res.count)
     res.success()
  })
}

然后用promise将异步操作和回调分开

我写的还是不够优雅,既然回调函数是为了让组件知道,commit成功,自然要在外边执行回调函数

改进

aUpdateInfo(context, payload) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      context.commit('updateInfo')
      console.log(payload)
      resolve('成功')
    }, 1000)
  })
}
updateInfo(count) {
  //this.$store.commit('updateInfo')
  this.$store
      .dispatch('aUpdateInfo', '我是携带信息')
      .then(res=>console.log(res))
}

我们这次加上一个return来返回Promise,这样一旦updateInfo执行dispatch方法时,就会跳到aUpdateInfo方法,该方法又将Promise返回到updateInfo方法,此时将then接着dispatch方法后边就是将then接Promise后边。

这样实现了双向信息的传递,首先我们通过dispatch方法传入携带信息,我们在actions里既可以使用携带信息,同时如果要给外部信息,通过可以利用返回Promise方法,将给外界的信息放在resolve参数里,不用单独在组件方法里用参数接受,通过then方法接受使用。

actions的使用详解_第2张图片

你可能感兴趣的:(vue,vue)