Le problème
Vue a beaucoup d’outils prêts à l’emploi qui nous facilitent la vie, par exemple Vuex et Vue-router. Mais, il repose encore trop sur des connexions magiques, ce qui rend le code difficile à comprendre. Afin d’aider l’IDE et mon avenir avec la lisibilité du code, j’ai commencé à réfléchir aux crochets et aux modèles qui les accompagnent.
Le code
Dans ce bac à sable, vous pouvez trouver le modèle de fournisseur de contexte de React appliqué à l’API de composition de Vue provide et inject méthodes.
La conclusion
Vue a un plugin très puissant Vuex pour la gestion de l’Etat. Mais, souvent, vous ne pouvez pas partager l’état d’une manière plus simple ou multiplier la même fonctionnalité d’état. Par conséquent, vous avez deux solutions standard, accessoires de forage et fournir/injecter. Forage est bon tant que ce n’est pas plus profond que 3 niveaux. Mais fournir/injecter, sous leur forme brute, reposent trop sur la magie à mon goût.
Une note importante : ce patron n’est pas destiné à remplacer Vuex, mais à le compléter. La règle de base ici est d’avoir le magasin Vuex pour l’état global et l’état Context pour un groupe de composants. Par exemple, Vuex est utilisé pour apporter userData à l’intérieur du composant d’en-tête, plus près du menu utilisateur. Et le composant racine du menu utilisateur transmet les données de Store à ses composants atomiques via le modèle de fournisseur de contexte en utilisant sous le capot provide et inject.
Cela nous donne Composants découplés qui sont faciles à exécuter et à tester séparément avec Storybook, Mocks, Jest Snapshot, etc.
Les plats à emporter
Si Composition API emprunte déjà tant à React, pourquoi ne pas garder cela à l’esprit et rendre Vue plus sympathique en combinant le meilleur des deux mondes ? N’ayez pas peur d’expérimenter en mélangeant des fonctionnalités et des modèles pour le plus grand bien.