Les livres consultés

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

/** Les trois derniers livres consultés, du plus récent au plus ancien. */
export const useHistoriqueStore = defineStore("historique", () => {
  const isbns = ref([]);

  function noter(isbn) {
    isbns.value = [isbn, ...isbns.value.filter((i) => i !== isbn)].slice(0, 3);
  }

  return { isbns, noter };
});

// Après chaque visite d'une fiche, l'ISBN rejoint l'historique.
router.afterEach((to) => {
  if (to.name === "livre") useHistoriqueStore().noter(to.params.isbn);
});

<script setup>
import { computed } from "vue";
import { RouterLink } from "vue-router";
import { useHistoriqueStore } from "./historique.js";

const props = defineProps({
  livres: { type: Array, required: true }, // le catalogue
});

const historique = useHistoriqueStore();
const consultes = computed(() =>
  historique.isbns
    .map((isbn) => props.livres.find((l) => l.isbn === isbn))
    .filter(Boolean), // un ISBN inconnu du catalogue est ignoré
);
</script>

<template>
  <section
    v-if="consultes.length > 0"
    aria-labelledby="titre-consultes"
  >
    <h2 id="titre-consultes">
      Vous avez consulté
    </h2>
    <ul>
      <li
        v-for="livre in consultes"
        :key="livre.isbn"
      >
        <RouterLink :to="{ name: 'livre', params: { isbn: livre.isbn } }">
          {{ livre.titre }}
        </RouterLink>
      </li>
    </ul>
  </section>
</template>

Java, Prince, Java, Étranger, Analyse → [ 'Analyse MPSI', 'L’Étranger', 'Programmation Java' ]

Le second passage sur Java le remonte en tête au lieu de le dupliquer, et le Petit Prince, le plus ancien, sort de la liste. Le store ne garde que des ISBN : les titres viennent du catalogue, qui fait foi (prix et titres à jour). Pour garder l'historique d'une visite à l'autre, il suffirait de remplacer la ref par useStockage.