Question

嗨，我有此创建和更新区域功能。 API调用成功后。我将再次回调vuex存储上的调度。然后返回主区域页面。问题是要花费大约5秒钟才能得到列表的调度结果。使我的列表未更新。

在返回页面之前如何知道调度是否完成？

loadZones(){
     this.$store.dispatch('getZones');
},

createOrUpdateZone(zone, region_checkbox, callback){
     this.$http.post(process.env.API_URL +'/api/.....)
      .then(res=> {
             if(res.data.success == true){
               this.loadZones();
               this.$router.push('/zone');
            } else{
               this.has_error = true;
     })
}

Answer 1

Vuex动作总是返回Promise，在return动作中创建请求时，只需添加getZones即可将ajax请求诺言与动作返回链接在一起，那么您可以执行以下操作：

//... in actions, example
getZones(context) {
   return some_http_request()
}


//...
loadZones(){
    return this.$store.dispatch('getZones');
},

createOrUpdateZone(zone, region_checkbox, callback){
 this.$http.post(process.env.API_URL +'/api/.....)
  .then(res=> {
         if(res.data.success == true){
           // next "then" will be invoked when this request will be done
           return this.loadZones();
         }
         else throw new Error();
  })
  .then(() => {
      this.$router.push('/zone');
  })
  .catch(() => this.has_error = true);
}

Answer 2

您可以使用异步等待。

当使loadZones异步功能时，可以在其中对派发getZones使用await。但是请记住，getZones操作应该返回一个承诺。我相信它已经返回了承诺，因此您只需要添加异步等待即可。

async loadZones(){
     await this.$store.dispatch('getZones');
},

createOrUpdateZone(zone, region_checkbox, callback){
     this.$http.post(process.env.API_URL +'/api/.....)
      .then(res=> {
             if(res.data.success == true){
               this.loadZones();
               this.$router.push('/zone');
            } else{
               this.has_error = true;
     })
}

检查调度Vuex是否完成

2 个答案: