对克隆对象的 Vuejs 操作会影响"parent"

Question

使用带有组合api的vuejs3，我异步地从api获取数据。

const accounts = ref([])
const credits = ref([])
const debits = ref([])
const summary = ref([])
const getaccounts = async () => {
try {
// getData is a preformatted axios function
const response = await getData.get(`/myurl/${route.params.month}/${route.params.year}`)
accounts.value = [...response.data.accounts]
debits.value = [...response.data.accounts].filter(obj => {
return obj.amount < 0
})
summary.value = [...debits.value] // DOESN'T WORK
setSummary(summary.value) // THEREFORE ALSO DOESN'T WORK
credits.value = [...response.data.comptes].filter(obj => {
return obj.amount > 0
})
} catch (error) {
console.log(error)
}
}

debits.value是一个包含55个对象的数组

const data = [
{ id: 12, amount : 45, category: "alim" },
{ id: 15, amount : 32, category: "misc" },
{ id: 11, amount : 145, category: "bla" },
{ id: 20, amount : 40, category: "misc" },
{ id: 22, amount : 12, category: "alim" },
{ id: 33, amount : 5, category: "bla" }
]

我想在一个新的对象数组中分组每个类别的总金额。代码在纯javascript中工作，函数setSummary是这样的:

const setSummary = (debs) => {
let arr = debs.reduce((acc, item) => {
let existItem = acc.find(({categorie}) => item.categorie === categorie);
if(existItem) {
existItem.amount += item.amount;
} else {
acc.push(item);
}
return acc;
}, [])
resume.value = arr
}

我对summary.value的任何操作都会影响debits.value。我知道Vue的反应性是基于Proxy文档的，但我不知道如何克隆或解构一个对象，使对克隆对象的操作不影响"父对象"。

Answer 1

需要对对象数组进行深度克隆。数组元素是参考值。所以如果你在总结中修改元素。值，它会影响到defaults . Value .

中的元素。不是

summary.value = [...debits.value]

试

summary.value = JSON.parse(JSON.stringify(debits.value))

或者使用lodash

import { cloneDeep } from "lodash"
.....
summary.value = cloneDeep(debits.value)