Verwenden von Skripteinstellungen und reaktivem Status vue 3 mit toRefs

Question

Ich versuche, in meinem Vue-Projekt ein Skript-Setup zu verwenden.

Vor der Verwendung der Skripteinstellungen würde mein Skript so aussehen:

<script>
Layout aus '../containers/Layout.vue' importieren;
import { reactive, toRefs } from 'vue'

Standard exportieren {
    Name: 'Zuhause',
    aufstellen() {
        const state = reactive({});
        zurückkehren {
            ...toRefs(Zustand),
        };
    },
    Komponenten: {Layout, Layout}
}
</script>

Jetzt habe ich das:

<script setup>

Layout aus '../containers/Layout.vue' importieren;
import { reactive, toRefs } from 'vue'

const state = reactive({});
const props = defineProps({
    Kopfzeile: Zeichenfolge
})


</script>

Ich bin mir nicht sicher, wie ich toRefs in diesem Fall verwenden soll. Im ersten Fall geben wir eine Variable zurück, daher verstehe ich die Art und Weise, wie wir ...toRefs(state) verwenden. Aber wie verwende ich es nun? Oder nicht mehr benötigt? Vielen Dank

Answer 1

如果您想直接在脚本设置中访问 state 反应的值，您可以使用 对象解构如下所示：

import { reactive, toRefs } from "vue"

const state = reactive({ name: "admin", age: 20 })
const { name, age } = toRefs(state)

然后您可以直接在模板中访问您的值

<template>
    {{ name }}
</template>

但是，必须重新输入所有属性，这不太方便

Answer 2

脚本设置隐式翻译变量定义

const a = ...

至

return {
   a: ...
}

脚本设置中的return {...dynamicValue}是不可替代的，它仅适用于常见用例。这需要将其与脚本结合起来。

return {...toRefs(state)} 没有什么好处，因为脚本块中不使用生成的引用。即使它们是，它们通常也被定义为单独的反应值而不是 state 对象：

const a = ref(...)
const b = reactive(...)

return { a, b }; // Not needed in script setup

如果需要将这些值作为单个对象处理，可以将它们组合在一起：

const a = ref(...)
const b = reactive(...)
const state = reactive({ a, b });

return { a, b }; // Not needed in script setup

对于脚本和脚本设置来说，其工作方式是相同的。