Vuex getter中JSON引发的引用传递问题求助

嘿，作为也折腾过音乐类Web应用的开发者，太懂这种轨道/场景数据引用踩坑的痛苦了！我来帮你拆解下可能的问题和解决办法：

先分析你当前代码的潜在问题 #

你用JSON.parse(JSON.stringify())做深拷贝的思路本身没问题，但这个方法有个致命局限：只能处理可JSON序列化的数据类型。如果你的newTrackDefaults里（比如tune数组后续要存入的元素）包含以下类型，就会出现意外的引用问题或者数据丢失：

• 函数、undefined、Symbol类型的属性（会直接被忽略）
• Date对象（会被转成ISO字符串，无法还原成Date实例）
• 循环引用的对象（直接抛错）

而且如果tune数组里存的是嵌套对象（比如音符对象{ note: 'C4', time: 0.5 }），理论上JSON深拷贝是能断开引用的，但如果后续你在操作新轨道的tune时，不小心又和state里的其他数据做了关联，也会出现引用共享的问题。

针对你的音乐应用场景，推荐几种更可靠的深拷贝方案 #

方案1：针对已知结构的手动深拷贝（最可控） #

因为你的轨道结构是明确的，手动拆解对象和数组的拷贝能避免JSON序列化的坑，还能提升性能：

newTrack: state => {
  const defaults = state.newTrackDefaults;
  return {
    // 浅拷贝顶层属性
    ...defaults,
    // 深拷贝tune数组——如果数组元素是对象，要逐个拷贝
    tune: defaults.tune.map(note => ({ ...note }))
  };
}

如果tune只是空数组或者存的是原始类型（字符串/数字），那直接用[...defaults.tune]浅拷贝数组就足够了。

方案2：使用Vue内置的工具方法（Vue2专属） #

Vue2提供了Vue.util.extend方法，可以用来做深拷贝（类似jQuery的$.extend）：

import Vue from 'vue';

// 在getter中
newTrack: state => {
  return Vue.util.extend({}, state.newTrackDefaults, {
    // 单独处理tune数组，确保引用断开
    tune: [...state.newTrackDefaults.tune]
  });
}

方案3：手写通用深拷贝函数（适合复杂嵌套结构） #

如果你的轨道属性后续会变得更复杂（比如轨道里包含效果器链、自动化曲线这些嵌套对象），可以写一个通用的深拷贝函数：

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  // 处理数组
  if (Array.isArray(obj)) return obj.map(item => deepClone(item));
  // 处理对象
  const clonedObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clonedObj[key] = deepClone(obj[key]);
    }
  }
  return clonedObj;
}

// 在getter中使用
newTrack: state => {
  return deepClone(state.newTrackDefaults);
}

额外排查点 #

最后别忘了检查你使用新轨道的逻辑：比如有没有在创建新轨道后，把它的tune数组直接赋值给了场景里的某个现有轨道？或者有没有在mutations里不小心修改了newTrackDefaults本身？这些操作都会导致意外的引用共享。

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