Gardez vos données à jour
Lors de la création d'une application, un des points les plus critiques est de s'assurer que les données sont toujours à jour et aussi faciles à maintenir que possible. Dans une page web traditionnelle, lorsqu'on écrit du contenu en HTML simple, le contenu est considéré comme des données « codées en dur » ou « statiques ». Ce contenu n'est pas censé être modifié en fonction d'autres variables de la page. Bien que cette pratique soit parfaitement adaptée à des données n'apparaissant qu'une seule fois sur le site, cela a ses limites. Cette méthode devient très difficile à gérer dans le temps, à mesure que les données sont propagées au sein d'une application.
Prenons un exemple de panier d'achats.
<html>
<body>
<h1>VueMart</h1>
<h2>Panier</h2>
<ul>
<li>Pommes: 6€</li>
<li>Bananes: 2€</li>
<li>Noix de coco: 8€</li>
</ul>
<p>Total: 16€</li>
</body>
</html>Dans l'exemple ci-dessus, nous pouvons voir que cette page contient une liste du contenu de la commande de l'utilisateur. Cependant, que se passerait-il si nous faisions passer le coût des bananes de 2 € à 10 € ? 🙃 Le montant total devrait également être mis à jour avec la bonne valeur. En d'autres termes, le total restera fixé à 16 €, à moins de le modifier manuellement en effectuant les calculs nécessaires pour le mettre à jour.
Découvrez les données réactives
Si vous avez déjà utilisé Excel et des spreadsheets, vous êtes très probablement familier avec la création d'équations dans des cellules de données. Par exemple, dans l'illustration suivante, le montant total est généré en additionnant les montants des pommes, des bananes et des noix de coco. Si l'un des montants change, cela se reflète automatiquement dans le total, sans aucun effort supplémentaire de votre part.
Comme vous pouvez le constater, lorsque le montant des pommes passe à 6, le total augmente automatiquement à 20. C'est l'essence même des données réactives puisqu'elles « réagissent » à toute modification et mettent à jour les valeurs concernées en conséquence.
Faites le lien entre les données réactives et Vue
Grâce aux connaissances que vous avez acquises dans le chapitre précédent, mettons maintenant en place un data store pour notre petit marché Vue !
Screencast
const app = new Vue({
el: '#app',
data: {
costOfApples: 6,
costOfBananas: 2,
costOfCoconuts: 8
}
})Dans notre HTML, nous pouvons maintenant réécrire le contenu statique pour qu'il ressemble à ceci :
<div id="app">
<h1>VueMart</h1>
<h2>Panier</h2>
<ul>
<li>Pommes: {{ costOfApples }}€</li>
<li>Bananes: {{ costOfBananas }}€</li>
<li>Noix de coco: {{ costOfCoconuts }}€</li>
</ul>
<p>Total: {{ costOfApples + costOfBananas + costOfCoconuts }}€</li>
<h2>Horaires d'ouverture</h2>
<p>Dimanche: 10h - 16h</p>
<p>Du lundi au vendredi : 09h - 17h</p>
<p>Samedi : 09h30 - 18h00</p>
</div>Comme vous pouvez le voir maintenant, le calcul du montant total est basé sur les trois variables : costOfApples, costOfBananas et costOfCoconuts. En cas de modification de l'une de ces valeurs, le total s'adaptera en conséquence. En d'autres termes, le data store fait en sorte que tout soit réactif pour que vous n'ayez plus à intervenir !
Bien que notre solution fonctionne, elle n'est pas satisfaisante lorsque le contenu de notre panier augmente. En effet, cela crée un surplus de travail. Et il serait bien plus propre de pouvoir écrire à la place {{ totalAmount }}. Après tout, bien que le panier d'achats ne contienne que trois articles pour le moment, vous comprenez que cela puisse rapidement devenir incontrôlable à mesure que le panier se remplit. Heureusement pour nous, Vue dispose d'une propriété pour nous aider à traiter ce type de cas : les propriétés calculées.
Découvrez les propriétés calculées
Les propriétés calculées (computed properties) nous permettent de définir une valeur réutilisable qui est mise à jour en fonction d'autres propriétés data. Comme pour la propriété data, nous commençons par ajouter une propriété calculée qui utilise un objet pour définir les propriétés que nous voulons.
const app = new Vue({
el: '#app',
data: {
costOfApples: 6,
costOfBananas: 2,
costOfCoconuts: 8
},
computed: {}
})Cependant, contrairement à la propriété data, chaque propriété calculée doit être une fonction retournant une valeur. En effet, elle effectue des calculs et retourne le résultat souhaité.
Comme je l'ai mentionné précédemment, notre but est de simplifier notre code HTML en utilisant {{ totalAmount }} au lieu de {{ costOfApples + costOfBananas + costOfCoconuts }}. Cela peut se faire de la manière suivante :
const app = new Vue({
el: '#app',
data: {
costOfApples: 6,
costOfBananas: 2,
costOfCoconuts: 8
},
computed: {
totalAmount() {
return this.costOfApples + this.costOfBananas + this.costOfCoconuts
}
}
})Avec ce refactoring, notre code est complet !
<html>
<body>
<div id="app">
<h1>VueMart</h1>
<h2>Panier</h2>
<ul>
<li>Pommes: {{ costOfApples }}€</li>
<li>Bananes: {{ costOfBananas }}€</li>
<li>Noix de coco: {{ costOfCoconuts }}€</li>
</ul>
<p>Total: {{ totalAmount }}€</li>
<h2>Horaires d'ouverture</h2>
<p>Dimanche: 10h - 16h</p>
<p>Du lundi au vendredi: 09h - 17h</p>
<p>Samesi: 09h30 - 18h00</p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
costOfApples: 6,
costOfBananas: 2,
costOfCoconuts: 8
},
computed: {
totalAmount() {
return this.costOfApples + this.costOfBananas + this.costOfCoconuts
}
}
})
</script>
</body>
</html>Toutes les données de notre application sont maintenant dynamiques et prêtes à réagir à toute modification pouvant intervenir dans le panier de l'utilisateur. Bien joué ! 👏
Pour le vérifier, vous pouvez par exemple vous rendre dans la console et taper app.costOfApples = 4. Toutes les données se mettent à jour automatiquement !
Entraînez-vous !
Vous trouverez le code source des exercices dans le repo GitHub du cours dans le dossier cafe-with-a-vue. Pour commencer, consultez la branche P1C3-Begin .
Instructions
Remplacez le nom du restaurant par "Café avec vue". Cela devrait être mis à jour partout sur le site.
Déplacez les données sur le restaurant dans le data store (le numéro de téléphone, l'adresse email et l'adresse postale).
Créez une propriété calculée pour le texte de copyright dans le footer.
En résumé
Dans ce chapitre, vous avez découvert :
les données réactives et leur importance dans la création de données maintenables dans une application ;
comment utiliser
datapour gérer les données dans votre application Vue.js ;comment utiliser les propriétés calculées (computed properties) pour simplifier votre code et la gestion de vos données.
Grâce à ces nouvelles connaissances, nous sommes maintenant prêts à découvrir une puissante fonctionnalité de Vue qui fournira de nouvelles capacités à notre HTML : les directives.
Alors, rendez-vous au chapitre suivant ! 🚀
