Un compte à rebours — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 8)

Un compte à rebours

Cycle de vie et composables · niveau 1 (application)

Énoncé

Écrire un composant CompteARebours : sa prop secondes est la durée de réservation d'un panier ; il affiche « Panier réservé encore 3 s » en décomptant chaque seconde, puis « Réservation expirée ». Le minuteur s'arrête à zéro, et au démontage.

Corrigé


<script setup>
import { onMounted, onUnmounted, ref } from "vue";

const props = defineProps({ secondes: { type: Number, required: true } });

const reste = ref(props.secondes);
let minuteur = null;

function arreter() {
  clearInterval(minuteur);
  minuteur = null;
}

onMounted(() => {
  minuteur = setInterval(() => {
    reste.value -= 1;
    console.log("reste", reste.value);
    if (reste.value === 0) arreter();
  }, 1000);
});
onUnmounted(arreter);
</script>

<template>
  <p role="timer">
    {{ reste > 0 ? `Panier réservé encore ${reste} s` : "Réservation expirée" }}
  </p>
</template>

Le texte au chargement, la console, puis le texte final :


Panier réservé encore 3 s
reste 2
reste 1
reste 0
Réservation expirée

La fonction arreter sert deux fois : à zéro, et au démontage (si l'utilisateur quitte la page avant la fin). Le rôle timer indique aux lecteurs d'écran une zone qui change seule ; il n'impose pas d'annoncer chaque seconde, ce qui serait insupportable.