Déstructuration d'objets réactifs dans les paramètres du script Vue
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>