Vue 组合 api - 复制反应数据对象

Question

如何使用 vue 组合 API 制作反应性对象的简单副本。

我想做

状态 = 形式

而不是

state.var1 = form.var1 state.var2 = form.var2

这里有一个例子来说明为什么我有这个问题。

// <FormModal>
<template>
<button @click="submitHandler" >Submit</button>
</template>

<script>
import { defineComponent, reactive } from "vue"
export const defineComponent({
setup(){
  const state = reactive({
    var1: "var1",
    var2: "var2"
  })
  function submitHandler(){
    emit("submit", state)
  }
  return { submitHandler }
}
})
</script>

// <Parent>
<template>
  <form-modal @submit="formSubmitHandler" />
</template>

<script>
import { defineComponent, reactive } from "vue"
export const defineComponent({
 setup(){
  const state = reactive({
    var1: "var1",
    var2: "var2"
  })
  function formSubmitHandler(form){
    // state = form => What I would like to do!!!
    state.var1 = form.var1
    state.var2 = form.var2
  }

  return { formSubmitHandler }
}
})
</script>

Answer 1

你可以解构你的对象

function formSubmitHandler(form){
  state = {...form}
}

const form = {
    var1: "var1",
    var2: "var2"
  }
const state = {...form}
console.log(state)