为什么我的伴生对象会随着我的目标一起更新？

Question

我已经设置了以下 Reactive：

let blank = {
    id: "new",
    label: "",
    details: "",
    status: "",
    due_date: "",
    deadline: "",
    enthusiasm: '0',
    allotted: 30,
}

const state = reactive({
    tray: "default",
    active: null,
    task: {
        current: blank,
        proposed: blank
    }
})

在我的一个组件中，我添加了如下数据：

setup() {
    const store = inject('store')

    async function refresh() {
      if (store.state.active !== null) {
        const response = await store.methods.loadTaskData(store.state.active)
        store.state.task.current = response.data.results
        store.state.task.proposed = response.data.results
      }
    }
    watch(() => store.state.active, () => {
      refresh()
    })
    refresh()

    return {store, ...toRefs(store.state.task)}
}

有了这个，当我使用 v-model 更新 proposed 对象中的字段时，出于某种原因它也会更新 current 对象中的相应字段。

<input
  v-model="proposed.label"
  type="text"
  class="form-field"
> 
// Updates both "current" and "proposed" objects.

但是，如果我删除这一行：

store.state.task.current = response.data.results

从而将“当前”对象留空，然后一切正常。对 proposed 所做的更改不会反映在 current 中。那么如何将 response.data.results 添加到 current 和 proposed 对象，而不让电线像这样交叉？

Answer 1

current 和 proposed 都被初始化为同一个对象。相反，分配 blank...

的副本

task: {
    current: { ...blank },
    proposed: { ...blank }
}

为什么我的伴生对象会随着我的目标一起更新？

Why is my companion object being updated along with my target?

vue.js

vuejs3

vue-composition-api