Verwenden von Skripteinstellungen und reaktivem Status vue 3 mit toRefs
P粉387108772
2023-08-26 15:38:41
<p>Ich versuche, in meinem Vue-Projekt ein Skript-Setup zu verwenden. </p>
<p>Vor der Verwendung der Skripteinstellungen würde mein Skript so aussehen: </p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>Jetzt habe ich das:</p>
<pre class="brush:php;toolbar:false;"><script setup>
Layout aus '../containers/Layout.vue' importieren;
import { reactive, toRefs } from 'vue'
const state = reactive({});
const props = defineProps({
Kopfzeile: Zeichenfolge
})
</script></pre>
<p>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 <code>...toRefs(state)</code> verwenden.
Aber wie verwende ich es nun? Oder nicht mehr benötigt?
Vielen Dank</p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
如果您想直接在脚本设置中访问
state反应的值，您可以使用 对象解构如下所示：import { reactive, toRefs } from "vue" const state = reactive({ name: "admin", age: 20 }) const { name, age } = toRefs(state)然后您可以直接在模板中访问您的值
<template> {{ name }} </template>但是，必须重新输入所有属性，这不太方便
脚本设置隐式翻译变量定义至
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对于
脚本和脚本设置来说，其工作方式是相同的。