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

Frais de livraison

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

Énoncé

Le serveur de la Librairie ajoute 2 € de frais aux commandes livrées sur le campus. Ajouter au store du panier un état retrait ("boutique" ou "campus") et des accesseurs frais et total. Vérifier le total de trois exemplaires de L'Étranger (7,90 €) et d'un Petit Prince (8,50 €), en boutique puis livrés. Pourquoi calculer en centimes ?

Corrigé


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

const FRAIS_CAMPUS = 2; // euros, comme le serveur

export const usePanierStore = defineStore("panier", () => {
  const lignes = ref([]);
  const retrait = ref("boutique"); // "boutique" ou "campus"

  // En centimes : des entiers, donc des sommes exactes.
  const sousTotalCentimes = computed(() =>
    lignes.value.reduce((s, l) => s + Math.round(l.prix * 100) * l.quantite, 0),
  );
  const frais = computed(() => (retrait.value === "campus" ? FRAIS_CAMPUS : 0));
  const total = computed(() => (sousTotalCentimes.value + frais.value * 100) / 100);

  function ajouter(livre, quantite = 1) {
    lignes.value.push({ isbn: livre.isbn, titre: livre.titre, prix: livre.prix, quantite });
  }

  return { lignes, retrait, frais, total, ajouter };
});


3 × L’Étranger : 23.7 | calcul direct : 7.9 * 3 = 23.700000000000003
+ Le Petit Prince, en boutique : 32.2
livré sur le campus : 34.2 dont 2 € de frais

Les prix sont des nombres à virgule flottante binaires : 7,90 n'y est pas représentable exactement, et 7.9 * 3 donne 23,700000000000003. Convertis en centimes entiers (arrondis une fois), les calculs sont exacts ; on ne repasse en euros qu'à la fin. C'est ce que fait le serveur de la Librairie, qui calculera le même total.