Vue项目如何局部更新数据

前言

在Vue项目中promise函数实现与后台交互时，发现有些只需要改一个数据的接口，但仍然不得不再次调用查询所有数据接口

当我们只需要更改/切换表格数据中的状态栏时，我们原本的代码是：

const request = { ...apis.UPDATE_WORK_STATUS };
      request['params'] = {
        id,
        workStatus
      };
      this.$request(request)
        .asyncThen((resp) => {
          this.$message({
            message: this.$t('common.successEdit'),
            type: 'success'
          });
          this.queryStaff('', this.pagination.currentPage, this.pagination.pageSize);
        }, (res) => { })

这样一来，我们会冗余的调用两个方法。

此时我们发现，每次更新状态栏数据时都会刷新整个页面。我们是否有办法让他局部刷新？
当然有。

      const request = { ...apis.UPDATE_WORK_STATUS };
      request['params'] = {
        id,
        workStatus
      };
      this.$request(request)
        .asyncThen((resp) => {
          this.$message({
            message: this.$t('common.successEdit'),
            type: 'success'
          });
          // this.queryStaff('', this.pagination.currentPage, this.pagination.pageSize);
          this.tableData.filter((item) => {
            if (item.id === id) {
              item.workStatus = workStatus;
            }
          })
        }

当我们换成上面的代码时，问题就会迎刃而解。