Bonjour,

J'ai une petite question sur le cycle de vie d'un composant dans VueJS.
Je suis au travail et je n'ai pas accès à mon code donc je ne pourrais vous donner des exemples que ce soir.

J'ai donc un Composant parent appelé pour l'exemple A qui a deux composants enfant B et C.

<template>
    <b-component></b-component>
    <c-component></c-component>
</template>

Dans ce composant, dans la fonction beforeCreate, je fais un appel à mon serveur via this.$http pour récupérer les infos de l'utilisateur (nom, prénom, avatar, localisation ... tout un tas de trucs) et je les stock dans un store, via un store.dispatch('modifierUser', user);

Certaines informations sont assez longues à récupérer, enfin pas instantanée quoi, comme sa photo de profil, sa photo de couverture par exemple que je récupère dans Mongo.

Et dans mes composants B et C, j'utilise les informations stockées dans le store précédemment pour les afficher, notamment les photos.
Le problème étant que lorsque j'essaye d'accéder à mes données dans le store, tout est undefined comme si la fonction beforeCreate du composant parent n'était pas encore terminée, pourtant les composants enfants ne devraient pas être crées après la fin de cette fonction ?

Je dois faire fausse route quelque part. Quelqu'un pourrait m'aiguiller ?

4 réponses


Bonsoir.
As-tu regardé la formation sur VueJS2 ?
Car Grafikart y aborde justement aussi ce qui concerne les composants et les stores, mais aussi le chargement des différentes composantes de la librairie.

Bonjour,

La requete http est une fonction asynchrone, le resultat n'est probablement pas arrivé quand tes composant sont initialisés. Alors quand tu souhaite afficher les données la valeur vaut 'undefined'.

Une solutions consiste à atendre la reception des données pour afficher le composant d'interface.
Tu peux utiliser un 'v-if- pour cela.
Idéealement, tu affiche un loader. Ensuite, tu lance la requete http et a reception de la reponse, tu affiche le composant et masque le loader.

PS: Le template d'un composant ne doit comporter qu'un seul élément racine ( l'expemple en comporte deux).

Neewd
Auteur

Oui Lartak j'ai regardé la formation ;)
MacFly c'est ce que je me suis dis mais je ne voulais pas passer par un système de loader. J'ai juste passé l'image en props et ça à fonctionnée :) Je ne savais mais on dirait que les props sont rechargées dynamiquement !

Un loader aussi simple soit-il est utile dans le cas d'un chargement asynchrone. (Même un simple -> loading ...)
Niveau ergonomie c'est bien et cela permet de faire patienter l'utilisateur.
Les props sont transformés en objet avec getter et setter afin de modifier les bindings en cas de changement de valeur.