vue.js+springboot的一个前后端分离项目，前端删除数据后页面不更新

Question

这个是删除数据的方法deleteRow()

// 删除用户信息
    deleteRow() {
      if (this.del_single_row == true) {
        if (
          this.$store.state.employee.emplId ==
          this.emplDetailVo.emplDetailCustom.emplId
        ) {
          this.$message.error("无法删除当前用户");
        } else {
          this.$axios
            .delete("/employee/emplDetail", {
              params: {
                emplDetailVo: JSON.stringify(this.emplDetailVo)
              }
            })
            .then(res => {
              if (res.data.successed === 1) {
                this.$message.success(res.data.msg);
              } else {
                this.$message.error(res.data.msg);
              }
            });
        }
      } else {
        if (this.del_list.indexOf(this.$store.state.employee.emplId) === -1) {
          this.$axios
            .delete("/employee/emplDetails", {
              params: {
                ids: this.$qs.stringify(this.del_list)
              }
            })
            .then(res => {
              if (res.data.successed > 0) {
                this.$message.success(res.data.msg);
              } else {
                this.$message.error(res.data.msg);
              }
            });
        } else {
          this.$message.error("不能删除包含自己的数据");
        }
      }
      this.resetData();
      this.delVisible = false;
      this.$refs.multipleTable.clearSelection(); // 清空选择的列
      this.getData();
    }

然后这边是获取数据的getData()方法

// 发送获取当前页面数据的请求
    getData() {
      console.log('获取数据');
      var emplListRequest;
      var emplCountRequest;
      //上面这部分是用于判断是直接获取所有数据还是获取带有搜索条件的数据，不是该问题的重点
      if (
        this.emplDetail4Search.search != "" ||
        this.emplDetail4Search.emplDetailCustom.stateId > 0 ||
        this.emplDetail4Search.emplDetailCustom.posId > 0
      ) {
        if (!this.searched) {
          this.cur_page = 1;
          this.searched = !this.searched;
        }
        emplListRequest = this.$axios.get("/employee/emplDetailCond", {
          params: {
            emplDetail4Search: JSON.stringify(this.emplDetail4Search),
            cur_page: this.cur_page,
            size: this.page_size
          }
        });
        emplCountRequest = this.$axios.get("/employee/emplCountCond", {
          params: {
            emplDetail4Search: JSON.stringify(this.emplDetail4Search)
          }
        });
      } else {
        if (this.searched) {
          this.cur_page = 1;
          this.searched = !this.searched;
        }
        emplListRequest = this.$axios.get("/employee/emplDetail", {
          params: {
            cur_page: this.cur_page,
            size: this.page_size
          }
        });
        emplCountRequest = this.$axios.get("/employee/emplCount");
      }

      //这里就是同时发送多个请求获取该页面需要的数据
      this.$axios
        .all([
          emplListRequest,
          this.$axios.get("/employee/emplPosition"),
          this.$axios.get("/employee/emplState"),
          emplCountRequest
        ])
        .then(
          this.$axios.spread((res1, res2, res3, res4) => {
            if (res1.data.list != null) {
              this.emplDetailList = res1.data.list;
            }

            if (res2.data != null) {
              this.emplPositionList = res2.data;
            }

            if (res3.data != null) {
              this.emplStateList = res3.data;
            }

            if (res4.data.count != null) {
              this.total = res4.data.count;
            }
          })
        );
        this.$forceUpdate;
    }

其他的操作新增、修改、查询都不会出现页面不更新的情况，我只要一做完操作，页面数据立马会进行更新。

Answer 1

已经解决了，getData()方法不要放在最后面执行，放在axios执行完的回调函数.then里面就可以了

this.$axios
.delete("/employee/emplDetail", {
              params: {
                emplDetailVo: JSON.stringify(this.emplDetailVo)
              }
            })
            .then(res => {
              if (res.data.successed === 1) {
                this.$message.success(res.data.msg);
                //在这里加上getData()方法即可
                this.getData();
              } else {
                this.$message.error(res.data.msg);
              }
            });

原因：axios是异步请求，我如果吧getData()方法放在deleteRow()方法的最下面就会导致异步请求还没有执行完删除数据，我这里就调用了getData()获取了数据，就会出现删除完数据，但是页面不刷新的情况，因此吧getData()放在axios的回调函数里就能在确认已经删除成功后再调用查询数据。