Une annonce qui s'efface — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 10)

Une annonce qui s'efface

Pinia : un état partagé par toute l'application · niveau 2

Énoncé

Écrire un store annonces dont l'action annoncer(texte, duree = 5000) affiche un message puis l'efface après duree millisecondes. Un nouveau message doit repousser l'effacement. Si l'on annonce un message à 0 s, un autre à 4 s, que voit-on à 8 s, puis à 9 s ?

Corrigé


import { ref } from "vue";
import { defineStore } from "pinia";

/** Les messages d'état de l'application, effacés après `duree` millisecondes. */
export const useAnnoncesStore = defineStore("annonces", () => {
  const message = ref("");
  let minuteur;

  function annoncer(texte, duree = 5000) {
    clearTimeout(minuteur); // un nouveau message remplace l'ancien et son minuteur
    message.value = texte;
    minuteur = setTimeout(() => {
      message.value = "";
    }, duree);
  }

  return { message, annoncer };
});

Le test fait avancer un temps simulé (vi.useFakeTimers, chapitre 11) :


à 8 s : « « Le Petit Prince » ajouté au panier. »
à 9 s : «  »

À 8 s, le second message est toujours là : le premier minuteur, qui l'aurait effacé à 5 s, a été annulé par clearTimeout. Le second l'efface à 4 + 5 = 9 s. Sans ce clearTimeout, le second message aurait disparu après une seconde seulement.