Vider le panier — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 10)

Vider le panier

Pinia : un état partagé par toute l'application · niveau 1 (application)

Énoncé

Écrire un composant BoutonVider.vue, à placer dans la page du panier de la Librairie, qui affiche un bouton « Vider le panier » seulement si le panier contient au moins un livre, et appelle l'action vider du store.

Corrigé


<script setup>
import { usePanierStore } from "@/stores/panier.js";

const panier = usePanierStore();
</script>

<template>
  <p v-if="!panier.estVide">
    <button
      type="button"
      class="bouton"
      @click="panier.vider()"
    >
      Vider le panier
    </button>
  </p>
</template>

Le test monte le composant, ajoute un livre au store, puis clique :


bouton : non, 0 article(s), annonce «  »
bouton : oui, 1 article(s), annonce « « Programmation Java » ajouté au panier. »
bouton : non, 0 article(s), annonce « Le panier a été vidé. »

Le bouton apparaît et disparaît avec le contenu du store, et l'annonce (role="status" dans le composant racine) informe l'utilisateur de lecteur d'écran.