Un composable hors de setup — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 8)

Un composable hors de setup

Cycle de vie et composables · niveau 2

Énoncé

Le composant suivant (dossier erreurs du chapitre) appelle useStockage au clic sur un bouton. Que dit la console ? Pourquoi ? Corriger.


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

const note = ref(null);

function noter() {
  // Erreur : un composable appelé dans un écouteur, et non dans setup
  note.value = useStockage("librairie-note", 0);
  note.value.value = 4;
}
</script>

Corrigé


[Vue warn]: onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

Le composable enregistre un onUnmounted (pour retirer son écouteur storage). Appelé dans un écouteur de clic, bien après le setup, il n'y a plus de « composant en cours de création » auquel rattacher le crochet : Vue le signale, et l'écouteur ne sera jamais retiré. De plus, chaque clic créerait un nouvel écouteur et un nouveau watch. On appelle le composable dans le script, et le clic ne fait que changer la valeur :


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

// Appelé dans setup : le nettoyage (onUnmounted) est rattaché à ce composant
const note = useStockage("librairie-note", 0);
</script>

<template>
  <button
    type="button"
    @click="note = 4"
  >
    Noter 4/5
  </button>
  <p>Note enregistrée : {{ note }}/5</p>
</template>

Après un clic :


Noter 4/5
Note enregistrée : 4/5

stocké : 4