在Vue脚本设置中解构响应式对象
我正在关注 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>