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

Question

将 vuejs3 与组合 api 结合使用，我从 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 反应性是基于 Proxydocumentation 但我不知道如何以对克隆对象的操作不会影响“父对象”的方式克隆或解构对象。

Answer 1

您需要deep-clone对象数组。数组元素是参考值。所以如果你修改summary.value中的元素，它会影响debits.value中的元素。

而不是

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

尝试

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

或者，使用 lodash

import { cloneDeep } from "lodash"
.....

summary.value = cloneDeep(debits.value)

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

Vuejs manipulation on the cloned object affect the "parent"

javascript

vuejs3