在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 中解構為動態命名變數？