Une valeur calculée miniature — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 3)

Une valeur calculée miniature

La réactivité · niveau 3 (difficile)

Énoncé

Ajouter au moteur miniature du cours une fonction calcule(accesseur) qui renvoie un objet dont la propriété value donne le résultat de l'accesseur, tenu à jour, et que l'on peut lire dans un effet. Tester avec un total prix * quantite affiché par un effet.

Corrigé


// Exercice : une valeur calculée par-dessus la mini-réactivité du cours.
import { reactif, effet } from "../../mini-reactivite/mini.mjs";

export function calcule(getter) {
  const etat = reactif({ valeur: undefined });
  effet(() => {
    etat.valeur = getter();
  });
  return {
    get value() {
      return etat.valeur;
    },
  };
}


import { reactif, effet } from "../../mini-reactivite/mini.mjs";
import { calcule } from "./calcule.mjs";

const ligne = reactif({ prix: 32, quantite: 2 });
const total = calcule(() => ligne.prix * ligne.quantite);

effet(() => console.log("affichage : total =", total.value));

ligne.quantite = 3;
ligne.prix = 30;


$ node demo.mjs


affichage : total = 64
affichage : total = 96
affichage : total = 90

Un effet intérieur recalcule le résultat et le range dans un petit objet réactif ; lire total.value lit donc une propriété suivie, et l'effet d'affichage dépend du résultat. Contrairement au computed de Vue, ce calcul est fait à chaque changement, même si personne ne lit la valeur : Vue, lui, attend la prochaine lecture (calcul paresseux).