为何修改Vuex Store对象的深拷贝会同步改动原Store数据？

你遇到的问题大概率是因为原数据中存在特殊内置对象（比如File类型），导致Lodash的cloneDeep无法完全切断嵌套层级的引用关联。以下是几种可靠的解决办法：

方法1：手动逐层构造新对象（最可靠） #

针对你的Store结构，手动拷贝每一层嵌套对象，确保所有引用都被替换为新对象：

const originalCourse = store.getters["course/course"];
// 逐层拷贝course对象及其嵌套属性
const localCopy = {
  ...originalCourse,
  // 处理image对象：如果存在则拷贝，否则保持null
  image: originalCourse.image ? { ...originalCourse.image } : null,
  // 处理数组：用map生成新数组，每个slide都是新对象
  information_slides: originalCourse.information_slides.map(slide => ({ ...slide })),
  question_slides: originalCourse.question_slides.map(slide => ({ ...slide }))
};

// 现在修改localCopy不会影响原Store
localCopy.image.file = null;

方法2：JSON序列化反序列化（简易版，注意局限性） #

如果你的数据中没有函数、File、Blob这类无法被JSON序列化的对象，可以用这种快速方法：

const localCopy = JSON.parse(JSON.stringify(store.getters["course/course"]));
localCopy.image.file = null;

⚠️ 局限性：会丢失特殊对象（比如File会被转为空对象）、函数，日期对象会被转为字符串，不适合包含这类数据的场景。

为什么cloneDeep没生效？ #

Lodash的cloneDeep对大部分普通对象/数组都能正常深拷贝，但对于浏览器内置的特殊对象（如File、Blob、Map、Set等），无法完全复制其内部结构，只能保留引用，导致修改拷贝对象时仍会影响原数据。手动逐层拷贝可以避免这个问题。

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