使用脚本设置和响应式状态 vue 3 与 toRefs

Question

我正在尝试在我的 vue 项目中使用脚本设置。

在使用脚本设置之前，我的脚本将是这样的：

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

export default {
    name: 'Home',
    setup() {
        const state = reactive({});
        return {
            ...toRefs(state),
        };
    },
    components: { Layout, Layout }
}
</script>

现在我有这样的：

<script setup>

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

const state = reactive({});
const props = defineProps({
    header: String
})


</script>

我不确定的是在这种情况下如何使用 toRefs？在第一种情况下，我们返回变量，因此我了解我们使用 ...toRefs(state) 的方式 但现在，我该如何使用它呢？或者不再需要了？ 谢谢

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

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