Déstructuration d'objets réactifs dans les paramètres du script Vue

Question

Je suis la documentation de Vue 3 pour voir comment je peux passer à l'utilisation de la balise <script setup> pour simplifier le code de mon composant.

L'un des avantages de cette configuration est que vous n'avez plus besoin d'utiliser le modèle d'exportation par défaut pour renvoyer explicitement des objets : tout ce qui est déclaré dans la portée de niveau supérieur sera automatiquement disponible dans le modèle.

Le problème que j'ai est que dans mon application j'ai un très gros objet comme état initial, dans mon application Vue 3 normale, je peux renvoyer cet objet et le déstructurer automatiquement comme ceci :

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

Cela m'évite d'avoir à déclarer chaque élément de l'objet comme son propre ref(), supprimant ainsi le passe-partout.

Ma question est la suivante : comment puis-je obtenir la même déstructuration automatique en mode Vue, qui ne détecte que les déclarations de niveau supérieur ? J'aimerais pouvoir référencer directement les clés de l'objet sans avoir à utiliser state.foo ou state.bar, mais sans avoir à déclarer explicitement chaque clé comme const afin de la rendre disponible dans

<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

Vous pouvez déstructurer l'objet comme vous le faites maintenant et enregistrer les clés et valeurs d'objet restantes à l'aide de l'opérateur spread.

sssccc

Chaque clé sauf foo et bar est accessible en accédant aux variables restantes. J'aime rest.test

Si ce n'est pas ce que vous voulez, je ne pense pas que ce que vous essayez de faire soit possible.

Si ma réponse n'est pas celle que vous souhaitez, veuillez vous référer à cet article : Comment déstructurer en variables nommées dynamiquement dans ES6 ?