数组展开拷贝未丢失引用，请求失败后无法重置this.layers初始值

async create() {
  let formData = new FormData()
  formData.append('name', this.name)
  formData.append('size', JSON.stringify(this.size))
  let copy = [...this.layers] // <==== 这里你尝试拷贝数组
  copy.forEach((layer, layerIndex) => {
    layer.traits.forEach((trait, traitIndex) => {
      if (!(trait.file instanceof Blob)) return
      let name = `file_${layerIndex}_${traitIndex}`
      formData.append(`images`, trait.file, name)
      trait.file = name
    })
  })
  formData.append('layers', JSON.stringify(copy))
  try {
    let result = await this.$axios.$post('/api/createcollection', formData)
    this.$router.push('/dashboard')
  } catch (err) {
    this.layers = [...copy] // <==== 这里你尝试失败后重置数组
    this.message = err.response.data
    setTimeout(() => {
      this.message = ''
    }, 5000)
  }
}

• 展开运算符[...this.layers]属于浅拷贝，仅会创建新的数组外层容器，数组内存储的layer对象仍然和原数组共用同一个内存引用。
• 你在遍历copy修改layer.traits下的trait.file属性时，本质修改的是和原数组共用的对象，所以this.layers会跟着同步变化，此时copy里存储的已经是修改后的值，自然无法用来重置回初始状态。

你需要对layers做深拷贝，切断内层对象的引用关联，根据你的数据结构可以选择以下两种方案：

1. 通用序列化方案（无函数、循环引用、Symbol等特殊值时可用）
   修改拷贝逻辑为深拷贝：

// 替换原浅拷贝代码
let copy = JSON.parse(JSON.stringify(this.layers))

此时修改copy内的对象属性完全不会影响原this.layers，请求失败时原数组本身还是初始状态，甚至不需要额外重置。

2. 针对性逐层拷贝（兼容特殊属性场景）
   针对你的layers结构手动逐层复制对象，避免全量序列化的问题：

let copy = this.layers.map(layer => {
  return {
    ...layer,
    traits: layer.traits.map(trait => ({...trait}))
  }
})

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