将对象推送到数组，组合式API

Question

有一个项目。有两个选择选项“size”（大，小）和数量（2/4/6）。

当选择每个选项时，需要在标题中显示所选内容（假设为小和4）。点击“添加到存储”按钮后，它将添加到存储中，在另一页上将显示一个列表。

我尝试过的：

vue ts：

const chosenMachines = reactive([]);

const machineInfo = ref({
 size: "Standart",
 glasses: 6
})

const addToList = () => {
 // myStore.addToStoredItems(machineInfo)  ---> storage pinia
 chosenMachines.push(machineInfo.value)
}

模板：

<div>Title {{ machineInfo.size  }} | {{ machineInfo.glasses }}</div>       
  <select name="size" v-model='machineInfo.size'  class='selects__select-item'>
    <option>Standart</option>
    <option>Big</option>
  </select>
  <select name="glasses" v-model.number='machineInfo.glasses' class='selects__select-item'>
    <option>6</option>
    <option>8</option>
    <option>12</option>
  </select>
 <button class='btn' @click='sendToStorage'>Add</button>

在添加第一个对象及以后的第二个对象时，第一个对象被覆盖了，原因是什么？

Answer 1

将machineInfo.value推入数组中保留对原始对象的引用。您刚刚进行了浅拷贝。对machineInfo.value的任何更新都会导致数组中的值也更新。在推入之前，您需要先进行深拷贝。

chosenMachines.push({...machineInfo.value})

有许多其他方法可以进行深拷贝，具体取决于您的数据，可能有一种方法更适合。