如何区分用户与代码对对象的修改？Pinia中saver触发异常求助

针对你遇到的「服务器加载数据时误触发保存逻辑」问题，以下是几个实用的最佳实践，结合你的Pinia代码给出具体实现：

1. 用状态标记阻断服务器更新阶段的保存 #

新增一个状态标记，在服务器加载数据期间直接跳过保存逻辑，无需频繁启停watch，逻辑更简洁。

修改后的Pinia代码：

import { defineStore } from 'pinia';
import { api, getError } from 'boot/axios';
import { ref, watch } from 'vue';

interface Data {
  A: string;
  B: Data[];
}

export const useDataStore = defineStore('data', () => {
  const data = ref<Data[]>([]);
  const loading = ref(false);
  // 标记是否处于服务器更新数据的阶段
  const isServerUpdating = ref(false);

  async function saver() {
    // 服务器加载时直接返回，不执行保存
    if (isServerUpdating.value) return;
    await api.post('/save-data', data.value);
  }

  async function load(id: number): Promise<void> {
    try {
      isServerUpdating.value = true;
      loading.value = true;

      const res = await api.post('/get-data', id);
      data.value = res.data;

      loading.value = false;
      isServerUpdating.value = false;
    } catch (error) {
      loading.value = false;
      isServerUpdating.value = false;
      throw error;
    }
  }

  // 初始化时直接开启深监听，无需反复启停
  watch(data, saver, { deep: true });

  return { data, loading, load };
});

2. 分离原始数据与用户修改数据 #

保存一份服务器返回的原始数据副本，仅当用户修改导致当前数据与原始数据不一致时才触发保存，精准区分用户操作与服务器更新。

修改后的Pinia代码：

import { defineStore } from 'pinia';
import { api, getError } from 'boot/axios';
import { ref, watch } from 'vue';

interface Data {
  A: string;
  B: Data[];
}

// 简单实现深比较（复杂场景可替换为lodash.isEqual）
function isDeepEqual(a: any, b: any): boolean {
  if (a === b) return true;
  if (typeof a !== 'object' || typeof b !== 'object' || a == null || b == null) return false;
  const keysA = Object.keys(a);
  if (keysA.length !== Object.keys(b).length) return false;
  for (const key of keysA) {
    if (!isDeepEqual(a[key], b[key])) return false;
  }
  return true;
}

export const useDataStore = defineStore('data', () => {
  const data = ref<Data[]>([]);
  const originalData = ref<Data[]>([]);
  const loading = ref(false);

  async function saver() {
    // 仅当数据与原始副本不同时才保存
    if (!isDeepEqual(data.value, originalData.value)) {
      await api.post('/save-data', data.value);
      // 保存成功后更新原始副本
      originalData.value = JSON.parse(JSON.stringify(data.value));
    }
  }

  async function load(id: number): Promise<void> {
    try {
      loading.value = true;

      const res = await api.post('/get-data', id);
      data.value = res.data;
      // 深拷贝保存服务器返回的原始数据
      originalData.value = JSON.parse(JSON.stringify(res.data));

      loading.value = false;
    } catch (error) {
      loading.value = false;
      throw error;
    }
  }

  watch(data, saver, { deep: true });

  return { data, loading, load };
});

3. 手动触发用户修改的保存 #

不再自动监听整个数据对象，而是封装用户修改的操作方法，仅在用户主动修改时触发保存，从根源避免服务器加载时的误触发。

修改后的Pinia代码：

import { defineStore } from 'pinia';
import { api, getError } from 'boot/axios';
import { ref } from 'vue';

interface Data {
  A: string;
  B: Data[];
}

export const useDataStore = defineStore('data', () => {
  const data = ref<Data[]>([]);
  const loading = ref(false);

  async function saver() {
    await api.post('/save-data', data.value);
  }

  async function load(id: number): Promise<void> {
    try {
      loading.value = true;

      const res = await api.post('/get-data', id);
      data.value = res.data;

      loading.value = false;
    } catch (error) {
      loading.value = false;
      throw error;
    }
  }

  // 封装用户修改操作，修改后自动触发保存
  function updateDataA(index: number, newValue: string) {
    data.value[index].A = newValue;
    saver();
  }

  function addChildData(parentIndex: number, newData: Data) {
    data.value[parentIndex].B.push(newData);
    saver();
  }

  return { data, loading, load, updateDataA, addChildData };
});

方法选型建议 #

• 状态标记法：适合大多数简单场景，实现成本低，无需修改现有数据结构。
• 原始数据对比法：适合需要精准控制保存时机、支持差异提交的场景，但注意深拷贝和深比较的性能开销。
• 手动触发法：适合交互复杂的场景，完全可控，避免不必要的监听开销，但需要封装所有用户修改操作。

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