Destrukturierung reaktiver Objekte in Vue-Skripteinstellungen
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>