Destrukturierung reaktiver Objekte in Vue-Skripteinstellungen

Question

Ich folge der Vue 3-Dokumentation, um zu sehen, wie ich dazu übergehen kann, das <script setup>-Tag zu verwenden, um meinen Komponentencode zu vereinfachen.

Einer der Vorteile dieses Setups besteht darin, dass Sie nicht mehr das Standard-Export-Boilerplate verwenden müssen, um Objekte explizit zurückzugeben: Alles, was im Bereich der obersten Ebene deklariert wird, ist automatisch in der Vorlage verfügbar.

Das Problem, das ich habe, ist, dass ich in meiner App ein sehr großes Objekt als Ausgangszustand habe. In meiner normalen Vue 3-App kann ich dieses Objekt zurückgeben und es automatisch wie folgt zerstören:

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

Dadurch erspare ich mir die Deklaration jedes Elements im Objekt als eigene ref() und entferne so das Boilerplate.

Meine Frage ist, wie kann ich die gleiche automatische Destrukturierung im Vue-Modus erreichen, der nur Deklarationen der obersten Ebene erkennt? Ich möchte in der Lage sein, direkt auf die Schlüssel des Objekts zu verweisen, ohne state.foo oder state.bar verwenden zu müssen, aber ohne jeden Schlüssel explizit als const deklarieren zu müssen, um ihn in

verfügbar zu machen

<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

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

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

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

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