將物件推送到數組，組合式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})

有許多其他方法可以進行深拷貝，具體取決於您的數據，可能有一種方法更適合。