Découvrir Vue.js 2

Gérer les mises à jour d'informations entre modules

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à mettre à jour une instance à partir d'une autre instance. Pour cela, vous devez maîtriser le fonctionnement des instances.
06:04

Transcription

On va voir ensemble comment mettre à jour le score. Le score, on sait qu'il est dans game, mais on sait qu'il doit aussi se répercuter sur composant score. En fait, on doit avoir ça. Concrètement, dès que je vais commencer à jouer, je veux que mon score se répercute. je veux que le score du joueur soit toujours affiché à l'écran. Ca c'est pas un problème pour le faire et pour le réaliser, vous allez devoir utiliser une technique un peu particulière. La première chose que l'on va devoir faire, c'est stocker et émettre une modification du score. Ca, on peut déjà le faire, c'est très facile pour nous, parce que le score, on le stocke dans click. C'est click qui nous permet avec l'incrémentation et la décrémentation d'avoir un score qui est unique sur le jeu pour le moment et qui nous permette d'avoir déjà le score de l'utilisateur, et d'ailleurs, on l'a déjà le score de l'utilisateur avant même de venir le modifier puisque il est affiché ici. Mais nous, on aimerait bien l'avoir dans le composant, là où vraiment il est utile. et d'ailleurs, ce qui serait interessant, c'est de pouvoir carrément supprimer toutes ces informations parce que j'ai pas du tout envie de les avoir, en réalité. Moi, ce que je veux mettre pour l'utilisateur, c'est vraiment ces informations, ici, qui sont justes des informations importantes. Est-ce qu'il a réussi? Est-ce qu'il n'a pas réussi? Est-ce qu'il a fait un perfect? Et je voudrais que sur son compteur de score, il ait vraiment le score qui s'affiche. Alors, on va modifier un peu ces messages là, et puis on va faire quelque chose de différent. Regardez, on va utiliser le moteur d'évènement qui est disponible au sein de Vue, pour passer l'information. Et comment on va passer l'information? On va utiliser <<$emit Emit va nous permettre de communiquer sur un verbe, par exemple, le score, et on va demander à emit d'envoyer un information au parent. Le parent c'est qui? Le parent c'est app. App va être en capacité de renvoyer l'information vers un autre composant, donc concrètement, c'est lui, game, qui va envoyer vers le parent et le parent qui va s'occuper de renvoyer vers un autre enfant. On va aller dans app pour voir ce qui se passe, parce que concrètement, dans game, vous n'avez rien d'autre à faire que de cabler un emit du score avec une valeur qui est mise à jour. Dans app, maintenant, on va devoir modifier un tout petit peu également. D'abord, il faut que vous ajoutiez les datas avec le score à 0, au tout début. Parce que, en ajoutant des datas, rappelez-vous, vous mettez en place, eh bien , une donnée, une information, une valeur, qui peut être mise à jour et qui surtout va être watchée, qui va être regardée, qui va être vue par votre application et qui va permettre une mise à jour. Ensuite, on va devoir, ici, définir une méthode. Cette méthode, elle va updater, elle va mettre à jour le score. Elle va simplement prendre le score en paramètres et elle va appliquer une modification sur le score. This.score de app va être mis à jour avec le score qui est envoyé. Et quand est-ce qu'on va utiliser le update score? Eh bien on va l'utiliser, regardez, ici. <, updateScore, c'est sur game, parce que game va émettre score. Et quand game va émettre score, avec le < qu'on a là, on va pouvoir regarder ce qui est émis sur score et enclencher l'update du score. L'update du score va prendre un paramètre, ce paramètre, il est passé ici, regardez, c'est le this.click. Et du coup, on va avoir une mise à jour qui va s'effectuer sur le score dans app. Attention, on est toujours dans app, on est dans le parent. Mais qui on doit mettre à jour? On doit mettre à jour le composant score. Eh bien, le composant score, regardez, on va lui mettre ici, un bind de score, une propriété, en fait. Et on va lui passer ce score là qui est en fait, attaché sur le parent, qui donc, sera mis à jour quand la game sera mise à jour. Et dans score, on va simplement définir une props, une propriété. C'est cette propriété, quand elle sera mise à jour, qui viendra s'afficher. Alors, en fait, on a juste à modifier les datas, ici, et à transformer ça en propriétés et cette propriété va pouvoir être écrasée par quelque chose. Vous voyez que la communication se fait à plusieurs niveaux. C'est d'abord le composant qui met les choses à jour qui va émettre vers le parent en demandant une modification. Le parent va écouter cette modification, le score et va donc, déclencher, pour le coup, une méthode d'update. Cette méthode d'update va se mettre à jour et va mettre à jour le score qui est stocké sur le parent, et vu que cette donnée est mise à jour et qu'ici, on a cablé une mise à jou r vers le composant score, eh bien, ça se met à jour. Alors, il y a en fait, 4 niveaux d'imbrications pour la mise à jour du score. Par contre, ce qui est génial, c'est que ça marche très bien. Et à partir de là, regardez, vous avez le score qui s'affiche réellement, et puis surtout, vous avez les messages qui vont s'afficher au fur et à mesure, et là, c'est très bien parce que pour le coup, vous avez des informations différentes dans l'interface et un score vraiment particulier. Alors, on ne devrait pas permettre quand même, de démarrer la partie tant qu'on a pas appuyé sur jouer, et tant qu'on a pas mis un nom d'utilisateur. C'est vrai, effectivement, il va falloir qu'on cable ça également, ça va être une deuxième partie, il va falloir le faire. Ce qu'on pourrait faire quand même, c'est de mettre un peu de style sur le score. Donc, pour ça, c'est pas très compliqué non plus, il suffit de venir utiliser ce qu'on a déjà utilisé avant, c'est-à-dire un style qui va être scopé, et puis ce style scopé, qu'est-ce qu'on va dire? On va simplement dire, la classe score, comme ça, elle va se display, block, elle va avoir une height, pourquoi pas, de 50 pixels, elle va avoir une width, pourquoi pas de 150 pixels. Et puis on peut lui mettre une font size, pourquoi pas, de 12 points. On peut mettre une color green, pour avoir un espèce d'afficheur un petit peu sympa. On peut lui mettre un background, pourquoi pas un peu foncé. On va mettre du 666. Donc là, on va utiliser ça avec 666. Et puis on va aussi, alors pas le display block, mais le display plutôt inline block? ce sera plus sympa, inline block. Et puis regardez ici, on va ajouter un peu de style également, hop, on va faire un padding, et on va faire un padding à 5 pixels, et on va enregistrer ça. Et là, on va avoir un score qui va être un tout petit peu plus sympa. Voilà. Pour le moment, évidemment, il y a ça qui est marqué dedans, on a pas envie que ce soit ça, mais on va le modifier plus tard, vous voyez qu'on peut appliquer du style facilement et avoir une petite interface sympa.

Découvrir Vue.js 2

Animez et rendez réactive la vue d’une application web avec le framework Vue.js. Mettez en place les interfaces web de demain​ ​et utilisez les librairies externes de votre choix.

2h25 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Vue.js Vue.js 2.1
Spécial abonnés
Date de parution :14 févr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !