在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>