Vue3调用saveChange()后Pinia状态与复选框同步更新异常

问题根源 #

执行saveChange()后，修改复选框会直接同步更新Pinia的workType和workRegionState状态，核心原因是引用传递导致的对象共享：

• 组件里的workTypeCheck、workRegionCheck是reactive响应式对象
• 调用profileStore.updataWorkType(workTypeCheck)时，直接把这个响应式对象赋值给了Pinia的workType.value
• 此时Pinia状态和组件内的workTypeCheck指向同一个内存地址，后续修改复选框（也就是修改workTypeCheck的属性）会直接同步到Pinia状态里

你尝试的localWorkType只是浅拷贝了属性，并没有解决Pinia状态和组件对象共享引用的核心问题。

修复步骤 #

1. 修改Pinia的更新方法，切断引用 #

在global.ts里，更新状态时对传入的对象做深克隆，避免共享引用：

export const usePorfileStore = defineStore('userProfile', () => {
    const workType = ref<workType>({ surveyor: false, designer: true, decorator: true });
    const workRegionState = ref<workRegionState>({
      indeterminate: false,
      checkAll: true,
      checkedList: ['北台灣', '中台灣', '南台灣', '東台灣', '台灣外島']
    });

    const updataWorkType = (type: workType) => {
      // 深克隆传入对象，创建独立副本
      workType.value = structuredClone(type);
    };
    const updataWorkRegionState = (state: workRegionState) => {
      workRegionState.value = structuredClone(state);
    };
    return {
      workType,
      workRegionState,
      updataWorkType,
      updataWorkRegionState,
    };
  },
  {
    persist: true
  }
);

2. 组件内初始化临时对象时，同样使用深克隆 #

在Profile.vue中，初始化workTypeCheck等对象时，避免直接引用Pinia状态的属性：

const workTypeCheck = reactive<workType>(structuredClone(profileStore.workType));
const localWorkType = reactive<workType>(structuredClone(profileStore.workType));
const workRegionCheck = reactive<workRegionState>(structuredClone(profileStore.workRegionState));

3. 优化updateLocalData方法 #

const updateLocalData = () => {
  Object.assign(localWorkType, structuredClone(profileStore.workType));
};

修复原理 #

structuredClone()会创建一个完全独立的对象副本，和原对象没有任何引用关联。这样Pinia的状态和组件内的临时对象就各自独立：修改复选框只会影响组件内的workTypeCheck，不会直接同步到Pinia状态，只有调用saveChange()时，才会把新的副本赋值给Pinia完成状态更新。

另外，structuredClone()也会处理数组的深拷贝，确保checkedList这类数组也不会出现引用共享的问题。

内容的提问来源于stack exchange，提问作者Ch-Lin