如何在对象数据变更时仅提交该对象 避免数组全量保存超时

现有包含1015个错误日志对象的数组，修改单个对象的done复选框值后提交整个数组会导致超时，需优化为仅提交变更过的对象。以下是实现方案：

核心实现步骤 #

• 加载数据时保存每个日志对象的原始done值，用于对比变更
• 维护一个集合存储所有修改过的日志对象
• 监听复选框的变更事件，检测done值的切换并更新变更集合
• 提交时仅发送变更集合中的对象

修改后的完整代码 #

<template>
  <b-container>
    <b-card class="mt-4">
      <h5>{{ $t('events') }}</h5>
      <b-table
        :items="errors"
        :fields="fields"
        :per-page="[10, 25, 50]"
        selectable
        :select-mode="'single'"
        @row-selected="onRowSelected"
        @row-clicked="showModal"
        sort-desc
        @cell-changed="onCellChanged" <!-- 新增：监听单元格变更事件 -->
      />
    </b-card>
    <error-log-entry-modal ref="errorLogEntryModal" :selected-error-log="selectedRows"/>
    <button @click="submit">Submit</button>
  </b-container>
</template>

<script>
import {errorService} from '@/services/error';
import ErrorLogEntryModal from '@/components/error-log/ErrorLogEntryModal';
import moment from 'moment';

export default {
  components: {
    ErrorLogEntryModal,
  },
  props: {
    ownerId: String
  },
  data() {
    return {
      errors: null,
      selectedRows: [],
      changedValues: new Set(), // 新增：存储修改过的对象
      originalDoneStatus: new Map() // 新增：存储原始done值，键为日志对象唯一标识
    };
  },
  computed: {
    fields() {
      return [
        {
          key: 'done',
          label: '',
          thStyle: 'width: 1%',
          template: {
            type: 'checkbox',
            includeCheckAllCheckbox: true,
          }
        },
        {
          key: 'priority',
          label: this.$t('errorLogs.priority'),
          sortable: true,
        },
        {
          key: 'creationDateTime',
          label: this.$t('creationDateTime'),
          formatter: date => moment(date).locale(this.$i18n.locale).format('L'),
          sortable: true,
        },
        {
          key: 'stackTraceShort',
          label: this.$t('errorLogs.stackTrace'),
          sortable: true,
        },
        {
          key: 'errorMessage',
          label: this.$t('message'),
          sortable: true
        },
      ]
    },
  },
  methods: {
    load(){
      errorService.getErrorLogs().then(result => {
        result.data.forEach(log => {
          log.stackTraceShort = log.stackTrace.substring(0,30);
          // 保存原始done状态，假设每个日志有唯一id字段，无id可替换为其他唯一标识
          this.originalDoneStatus.set(log.id, log.done);
        });
        this.errors = result.data;
      })
    },
    submit(){
      // 将Set转为数组，只提交修改过的对象
      const changedArray = Array.from(this.changedValues);
      if (changedArray.length === 0) {
        console.log('没有修改需要提交');
        return Promise.resolve();
      }
      // 调用服务端接口提交变更数据
      return errorService.setStatusOnErrorEntryLog(changedArray).then( result => {
        console.log(result);
        // 提交成功后清空变更集合，并更新原始状态
        changedArray.forEach(log => {
          this.originalDoneStatus.set(log.id, log.done);
        });
        this.changedValues.clear();
      })
    },
    onRowSelected(fields){
      this.selectedRows = fields;
    },
    showModal(){
      if (this.selectedRows) {
        this.$refs.errorLogEntryModal.show();
      }
    },
    // 新增：处理单元格变更事件
    onCellChanged({ item, field, value }) {
      // 只处理done字段的变更
      if (field.key === 'done') {
        const originalValue = this.originalDoneStatus.get(item.id);
        if (value !== originalValue) {
          // 值发生变化，加入变更集合
          this.changedValues.add(item);
        } else {
          // 值改回原始状态，从集合中移除
          this.changedValues.delete(item);
        }
      }
    }
  },
  created() {
    this.load();
  },
};
</script>

关键说明 #

1. originalDoneStatus：用Map存储每个日志对象的原始done值，确保能准确对比是否发生变更
2. changedValues：用Set存储修改过的对象，避免重复添加同一对象
3. @cell-changed事件：监听b-table的单元格变更，仅处理done字段的变化，更新变更集合
4. 提交逻辑优化：提交前判断变更集合是否为空，仅发送修改过的对象，提交成功后更新原始状态并清空集合

内容的提问来源于stack exchange，提问作者Cphml444