Pas de commande sans livre — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 10)

Pas de commande sans livre

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

Énoncé

L'application aura bientôt une page /commande. Écrire sa garde de route : si le panier est vide, rediriger vers la page du panier, avec dans la requête ?raison=vide pour que la page puisse l'expliquer. Pourquoi cette garde fonctionne-t-elle même si l'on ouvre directement l'adresse /commande ?

Corrigé


{
  path: "/commande",
  name: "commande",
  component: page("Commande"),
  // Le store s'utilise dans une garde : Pinia est installée avant le routeur.
  beforeEnter: () => {
    const panier = usePanierStore();
    if (panier.estVide) return { name: "panier", query: { raison: "vide" } };
  },
},


panier vide     → /panier?raison=vide
panier non vide → /commande

La garde appelle le store au moment de la navigation, pas au chargement du module. Ouvrir directement /commande déclenche la première navigation, lancée par l'installation du routeur ; Pinia, installée juste avant dans main.js, est déjà active, et le store relit le panier dans localStorage à sa création. Si l'on inversait les deux use, la garde échouerait faute de Pinia active.