Vuex--actions

在Vuex  mutations中,我们有时会进行异步操作(向后端发送请求)。

action中方法的第一个参数context 相当于$store

现在使用setTimeout()模仿异步操作

state: {
    info: {
        name: 'c',
        age: '21'
    }
}

mutations: {
    update(state){
      etTimeout( () => {
          state.info.name = 'a'
      },1000)
    }
}
调用update方法一秒钟后name改为a。在视图上确实看到了name的变化,但是打开devtools发现并没能成功跟踪到name的变化。因为vuex中的异步操作需要在actions中进行。
mutations: {
    update(state,payload){
      state.info.name = payload
    }
}

actions: {
    Aupdate(context,payload){
      setTimeout( () => {
        context.commit('update',payload)
      },1000)
    }
}

methods: {
    update(){
      this.$store.dispatch('Aupdate','aaa')
    }
}
通过dispatch方法调用action中的Aupdate方法,进行异步操作,异步操作就是commit调用mutation中的update方法,aaa从update传到Aupdate,再传到mutatuion的update。

action同样支持特殊提交

this.$store.dispatch({
    type: "Bupdate",
    stu,
    : "aaa",
})

使用Promise对异步操作完成做一个通知

Bupdate(context,payload){
      return new Promise((resolve,reject) => {
        setTimeout( () => {
          context.commit('addStu',payload) 
          resolve()   
        },2000)
      })
    }
 

update() {
      /*
      actions的Bupdate返回一个Promise相当于在这里是
      Promise().then()
      */
      this.$store
        .dispatch({
          type: "Bupdate",
          stu,
          a: "aaa",
        })
        .then((res) => {
          console.log(res);
          alert("Over");
        });
    },





全部评论

相关推荐

点赞 收藏 评论
分享
牛客网
牛客企业服务