La persistance à la main

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

const CLE = "librairie-panier";

function relire() {
  try {
    return JSON.parse(localStorage.getItem(CLE)) ?? [];
  } catch {
    return []; // stockage interdit, ou contenu illisible
  }
}

export const usePanierStore = defineStore("panier", () => {
  const lignes = ref(relire()); // relu à la création du store
  const nombre = computed(() => lignes.value.reduce((s, l) => s + l.quantite, 0));

  // Réécrit à chaque modification, même profonde (une quantité qui change).
  watch(lignes, (valeur) => localStorage.setItem(CLE, JSON.stringify(valeur)), { deep: true });

  function ajouter(livre) {
    const ligne = lignes.value.find((l) => l.isbn === livre.isbn);
    if (ligne) ligne.quantite += 1;
    else lignes.value.push({ isbn: livre.isbn, titre: livre.titre, prix: livre.prix, quantite: 1 });
  }

  return { lignes, nombre, ajouter };
});

Le test ajoute deux fois le même livre, lit le stockage, puis crée une nouvelle Pinia et un nouveau store :

stocké : 78 caractères :
[
  {
    isbn: '9782956300014',
    titre: 'Programmation Java',
    prix: 32,
    quantite: 2
  }
]
relu : 2 article(s), même objet ? false

• { deep: true } est indispensable : le second ajout ne remplace pas le tableau, il change la quantité d'une ligne.
• L'écriture a lieu après le code synchrone (le test attend un nextTick) : dix modifications de suite ne coûtent qu'une écriture.
• Le nouveau store n'est pas le même objet, mais il a relu les deux exemplaires.