在 Vue 脚本设置中解构 Reactive 对象

Question

我正在关注 Vue 3 文档，了解如何转向使用 <script setup> 标签来简化我的组件代码。

使用此设置的好处之一是您不再需要使用导出默认样板来显式return一个对象：在顶级范围内声明的任何内容都将自动在模板中可用。

我遇到的问题是，在我的应用程序中，我有一个非常大的对象作为我的初始状态，在我的普通 Vue 3 应用程序中，我可以 return 并自动解构，如下所示：

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

    export default {
        setup() {
            const state = reactive({
                foo: 1,
                bar: 2,
                // the rest of a very large object
            })
            
            return toRefs(state) 
        }
    }
</script>

这样我就不必将对象中的每个项目都声明为其自己的 ref()，从而删除样板文件。

我的问题是，如何在 Vue 模式下实现相同的自动解构，它只检测顶级声明？我希望能够直接引用对象的键，而不必使用 state.foo 或 state.bar，但不必为了使其在

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

    const state = reactive({
                foo: 1,
                bar: 2,
                // the rest of a very large object
            })

    const { foo, bar, ? } = toRefs(state) // how do I destructure this dynamically? 
</script>

Answer 1

您可以像现在这样解构对象，并使用扩展运算符保存对象键和值的其余部分。

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

    const state = reactive({
                foo: 1,
                bar: 2,
                test: 'test',
                // the rest of a very large object
            })

    const { foo, bar, ...rest } = toRefs(state) // how do I destructure this dynamically? 
</script>

除了 foo 和 bar 之外的每个键都可以通过访问 rest 变量来访问。喜欢rest.test

如果这不是您想要的，我认为您尝试做的事情是不可能的。

如果我的回答不是您要找的，请参阅此 post：

在 Vue 脚本设置中解构 Reactive 对象

Destructure Reactive object in Vue script setup

decomposition

vue.js

vuejs3

vue-composition-api

vue-script-setup