VueJS : appeler une fonction dans un autre composant

Résolu/Fermé
arscy Messages postés 173 Date d'inscription dimanche 26 janvier 2014 Statut Membre Dernière intervention 5 octobre 2023 - 19 mai 2023 à 17:07
arscy Messages postés 173 Date d'inscription dimanche 26 janvier 2014 Statut Membre Dernière intervention 5 octobre 2023 - 24 mai 2023 à 17:38

Bonjour,

S'il y a parmi vous des adeptes de VueJS (typescript)...
Je n'arrive pas à résoudre un problème actuel :
Je dispose d'une view composée de deux composants.

Je souhaite faire en sorte d'exécuter une fonction dans un composant B [si et seulement] lorsqu'une variable v est actualisée dans un composant A .
J'ai mis en place un store qui permet d'avoir accès à la variable v depuis les composants A et B sans problème.

Naturellement j'ai pensé à implémenter un event. J'ai tenté 2 approches via "emit" qui se sont misérablement désintégrées dans leur propre effort dans le cadre où vueJS n'autorise pas l'utilisation de '$on' visiblement, qui n'est pas native de ce code.

J'ai alors tenté de créer un bus d'événement personnalisé, et là encore, ça ne passe pas (l'instanciation d'un Vue() n'est pas validé sous vueJS 3.x)

Enfin j'ai essayé de passer par "inject/provide", qui semblait être une solution séduisante de prime abord (injection d'une méthode pour la rendre disponible dans un autre composant) mais ça ne passe pas et en fait ça va plus m'embêter qu'autre chose.

J'ai laissé de côté les props ou encore les "computed", ne voyant pas comment en tirer parti, bien que j'aie l'impression qu'un computed pourrait je ne sais trop comment porter des fruits?

Je me suis dit que je pourrais essayer de placer un formulaire dissimulé dans le 2e composant pour pouvoir relier facilement l'appel à la fonction, mais il me manque toujours le déclencheur pour exécuter la fonction dans ce cas.

Auriez-vous des pistes / suggestions pour me permettre de me dépêtrer?
Merci d'avance

1 réponse

arscy Messages postés 173 Date d'inscription dimanche 26 janvier 2014 Statut Membre Dernière intervention 5 octobre 2023 9
24 mai 2023 à 17:38

Une solution peut être celle d'implémenter la méthode dans le Store.
--> placer une variable avec un listener dessus, lequel déclenche la fonction.
Le composant A actualise la variable var1Store du store,
Le listener placé sur la variable var1Store appelle la fonction funcStore
La fonction funcStore modifie une variable var2Store
Le composant B n'a plus qu'à gérer l'affichage de var2Store.

0