Adloun

Vue : construire une application web (école d'ingénieur) · Chapitre 10 · Application directe du cours

Prévoir l'affichage

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

Énoncé

On reprend le store de la démonstration du chapitre (des titres, leur nombre, les actions ajouter et vider), et ce composant :


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

const { titres, nombre, ajouter, vider } = usePanierStore();
</script>

<template>
  <p>{{ nombre }} livre(s) : {{ titres.join(", ") }}</p>
  <button
    type="button"
    @click="ajouter('Le Petit Prince')"
  >
    Ajouter
  </button>
  <button
    type="button"
    @click="vider"
  >
    Vider
  </button>
</template>

On clique sur Ajouter, Ajouter, Vider, Ajouter. Prévoir le paragraphe affiché après chaque clic, puis corriger le composant.

Corrigé

Affichage relevé par le test après chaque clic :


départ   → 0 livre(s) :
ajouter  → 0 livre(s) : Le Petit Prince
ajouter  → 0 livre(s) : Le Petit Prince, Le Petit Prince
vider    → 0 livre(s) : Le Petit Prince, Le Petit Prince
ajouter  → 0 livre(s) : Le Petit Prince, Le Petit Prince
  • nombre a été copié à la déstructuration : il vaut 0 pour toujours.
  • titres, lui, est le tableau réactif du store (déballé de sa ref) : le composant tient une référence vers ce tableau-là. Les deux push le modifient, l'affichage suit.
  • vider remplace le tableau du store par un nouveau tableau vide ; le composant tient toujours l'ancien, qui contient deux titres. Le dernier ajout va dans le nouveau tableau, que le composant ne voit pas.
  • ajouter et vider, des fonctions, fonctionnent parfaitement une fois déstructurées.

Correction : const panier = usePanierStore(); et {{ panier.nombre }}, panier.titres dans le gabarit ; ou bien


const panier = usePanierStore();
const { titres, nombre } = storeToRefs(panier); // état et accesseurs
const { ajouter, vider } = panier;              // actions

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →