使用脚本设置和带有toRefs的React性状态vue 3

0kjbasz6 于 2022-12-19 发布在 Vue.js

关注(0)|答案(2)|浏览(97)

我正尝试在我的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>

我不确定的是在这种情况下如何使用toRef？在第一种情况下，我们返回变量，这样我就了解了使用...toRefs(state)的方式。但是现在，我如何使用它？还是不再需要它了？谢谢

vue.js

来源：https://stackoverflow.com/questions/74789657/using-script-setup-and-reactive-state-vue-3-with-torefs

2条答案

按热度按时间

w8f9ii691#

script setup隐式转换变量定义

const a = ...

到

return {
   a: ...
}

在script setup中没有return {...dynamicValue}的替代品，script setup仅适用于常见用例，这需要将其与script组合。
return {...toRefs(state)}没有很好的作用，因为得到的refs在脚本块中没有使用，即使使用，通常也被定义为单独的无功值，而不是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

对于script和script setup，其工作方式相同。

赞(0）回复(0）举报 2022-12-19

g2ieeal72#

如果你想在脚本设置中直接访问stateReact的值，你可以使用对象重构，如下所示：

import { reactive, toRefs } from "vue"

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

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

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

但是，这是非常不方便，必须重新键入所有属性

赞(0）回复(0）举报 2022-12-19

我来回答

使用脚本设置和带有toRefs的React性状态vue 3

2条答案

相关问题

热门标签

最新问答