Un booléen réutilisable — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 8)

Un booléen réutilisable

Cycle de vie et composables · niveau 1 (application)

Énoncé

Écrire un composable useBascule(initial) qui rend un booléen et trois fonctions pour le basculer, l'activer, le désactiver. L'utiliser pour un bouton « Voir plus » / « Voir moins » qui montre les détails d'un livre, avec aria-expanded.

Corrigé


import { ref } from "vue";

/** Un booléen et les trois façons de le changer. */
export function useBascule(initial = false) {
  const etat = ref(initial);
  const basculer = () => (etat.value = !etat.value);
  const activer = () => (etat.value = true);
  const desactiver = () => (etat.value = false);
  return { etat, basculer, activer, desactiver };
}


<script setup>
import { useBascule } from "../composables/useBascule.js";

const { etat: details, basculer } = useBascule();
</script>

<template>
  <h2>Programmation Java</h2>
  <button
    type="button"
    :aria-expanded="details"
    aria-controls="details"
    @click="basculer"
  >
    {{ details ? "Voir moins" : "Voir plus" }}
  </button>
  <p
    v-show="details"
    id="details"
  >
    16 chapitres, 174 exercices corrigés.
  </p>
</template>

Avant et après un clic :


Voir plus (aria-expanded=false), détails visibles : false
Voir moins (aria-expanded=true), détails visibles : true

La déstructuration renomme etat en details : comme le composable rend des refs, le nom local reste réactif.