在Vue脚本设置中解构响应式对象

Question

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

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

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

<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，但不必将每个键显式声明为 const 以便使其在 中可用

<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

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

sssccc

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

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

如果我的答案不是您想要的，请参阅这篇文章： 如何在 ES6 中解构为动态命名变量？