Un thème mémorisé — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 8)

Un thème mémorisé

Cycle de vie et composables · niveau 1 (application)

Énoncé

La feuille de la Librairie choisit le thème sombre quand <html> porte data-theme="sombre". Avec useStockage, écrire un bouton qui bascule le thème et s'en souvient d'une visite à l'autre.

Corrigé


<script setup>
import { watchEffect } from "vue";
import { useStockage } from "../composables/useStockage.js";

const theme = useStockage("librairie-theme", "clair");

// La feuille de la Librairie lit data-theme sur <html>
watchEffect(() => {
  document.documentElement.dataset.theme = theme.value;
});
</script>

<template>
  <button
    type="button"
    :aria-pressed="theme === 'sombre'"
    @click="theme = theme === 'clair' ? 'sombre' : 'clair'"
  >
    Thème sombre
  </button>
</template>


après un clic : data-theme=sombre, stocké : "sombre"
après rechargement : data-theme=sombre, aria-pressed=true

watchEffect recopie le thème sur <html> au démarrage et à chaque changement. Le stockage contient la chaîne JSON "sombre", guillemets compris.