Vue 3 反应对象更新与传播运算符

Question

我最近开始研究 Vue 组合 API 我一定错过了一些东西，因为我发现这种“新”方法是真正的 PITA！

以前，我能够使用简单的扩展运算符通过 created() 挂钩中的 REST API 调用来更新我的表单数据。我试图在组合中转置它 API 但我有点坚持语法更改（而且我知道展开运算符“杀死”了反应性）。

我能够使用这样的 setup() {} 方法使其工作（顺便说一句，这是我原始页面的过度简化但有效的示例）：

<script>
import { reactive, toRefs } from 'vue'

export default {
    setup() {
        let profil = reactive({
            memberNo: '',
            details: {
                firstname: '',
                lastname: '',
                date: '',
                address: {
                    city: '',
                    street: '',
                    postalCode: ''
                }
            }
        })

        return {
            ...toRefs(profil)
        }
    },
    created() {
       // Call some API
        let dataFromApi = {
            memberNo: '1234',
            details: {
                firstname: 'Micheal',
                lastname: 'Jordan',
                date: '1967-01-21',
                address: {
                    city: 'Quebec',
                    street: 'No street',
                    postalCode: 'H0H 0H0'
                }
            }
        }
        this.profil = { ...this.profil, ...dataFromApi }
    }
}
</script>

<template>
    <p>
        {{ profil.memberNo }}
        {{ profil.details.firstname }}
    </p>
</template>

所以使用 toRefs() 方法是可行的。但是，如果我想全部使用 <script setup> 标签，我找不到方法来完成这项工作 ?!?

此代码不适用于扩展运算符，但“可以”用于单独赋值（备注）

<script setup>
import { reactive, onBeforeMount, toRefs } from 'vue'

let profil = reactive({
    memberNo: '',
    details: {
        firstname: '',
        lastname: '',
        date: '',
        address: {
            city: '',
            street: '',
            postalCode: ''
        }
    }
})

onBeforeMount(() => {
  // Call some API
    let dataFromApi = reactive({
        memberNo: '1234',
        details: {
            firstname: 'Micheal',
            lastname: 'Jordan',
            date: '1967-01-21',
            address: {
                city: 'Quebec',
                street: 'No street',
                postalCode: 'H0H 0H0'
            }
        }
    })
  // Don't work
    profil = { ...toRefs(profil), ...toRefs(dataFromApi) }
  // ... but this work
    // profil.memberNo = dataFromApi.memberNo
    // profil.details.firstname = dataFromApi.details.firstname
})
</script>

拜托，用作文找回我的信心API，否则我将在这个项目的其余部分坚持使用选项！ :-)

Answer 1

profil = { ...toRefs(profil), ...toRefs(dataFromApi) }

这行不通，因为您正在使用 {} 语法创建文字非反应性对象。

我认为您可以使用 Object.assign(profil, dataFromApi)，因为将保留对 profil 的引用，因此它会保持反应性。

Vue 3 反应对象更新与传播运算符

Vue 3 reactive object update with spread operator

spread

vue-reactivity

vuejs3

vue-composition-api