Vue Academy · Leçon

Fabriques de composables et composables paramétrés

Création de fabriques de composables, portée de l’état par instance et prévention d’un état singleton partagé

Leçon 2 sur 413 étapes

Fabriques de composables et composables paramétrés est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Des composables qui acceptent des paramètres

Un composable simple renvoie un comportement fixe. Un composable paramétré accepte des arguments pour personnaliser son fonctionnement — une URL de base, des options, des valeurs par défaut — afin qu’une seule fonction puisse répondre à de nombreux cas.

Un composable paramétré simple

Transmettez la configuration sous forme d’arguments. Ici, l’URL est fournie par l’appelant : un seul useFetch peut donc fonctionner avec n’importe quel point de terminaison.

import { ref } from "vue"

export function useFetch(url) {
  const data = ref(null)
  fetch(url).then(r => r.json()).then(d => data.value = d)
  return { data }
}

Accepter un objet d’options

Lorsque de nombreux paramètres sont nécessaires, utilisez un objet d’options avec des valeurs par défaut. L’appel reste ainsi lisible et le composable flexible.

export function useFetch(url, options = {}) {
  const { immediate = true, method = "GET" } = options
  const data = ref(null)
  function run() { /* fetch with method */ }
  if (immediate) run()
  return { data, run }
}

Qu’est-ce qu’une fabrique de composables ?

Une fabrique va plus loin : c’est une fonction qui renvoie un composable préconfiguré avec des paramètres communs. Vous configurez une seule fois, puis vous obtenez un composable personnalisé à utiliser dans plusieurs composants.

Construire une fabrique

La fonction externe capture la configuration commune (par exemple baseURL) ; la fonction interne renvoyée est le composable, avec cette configuration intégrée grâce à la fermeture lexicale.

export function createApi(baseURL) {
  return function useApi(path) {
    const data = ref(null)
    fetch(baseURL + path).then(r => r.json()).then(d => data.value = d)
    return { data }
  }
}

Utiliser une fabrique

Appelez la fabrique une fois (souvent dans un module partagé) pour produire un composable configuré, puis importez-le et utilisez-le partout.

// api.js
export const useApi = createApi("https://api.example.com")

// component
import { useApi } from "./api"
const { data } = useApi("/users")

État isolé par instance

Chaque fois que vous appelez un composable, les références qu’il crée sont nouvelles et locales à cet appel. Deux composants qui appellent useFetch obtiennent des références data indépendantes — sans partage accidentel.

const a = useFetch("/posts")   // its own data ref
const b = useFetch("/comments") // a separate data ref

Singleton partagé au niveau du module

Parfois, vous WANT une seule instance partagée. Déclarez l’état au niveau du module (à l’extérieur de la fonction) : le composable le capture alors dans sa fermeture lexicale et tous les appelants partagent les mêmes références.

import { ref } from "vue"
const user = ref(null) // module-level, shared

export function useAuth() {
  function login(u) { user.value = u }
  return { user, login }
}

Par instance ou singleton

État à l’intérieur de la fonction → nouveau à chaque appel (par composant) — formulaires, récupérateurs de données.
État au niveau du module → singleton partagé — utilisateur actuel, thème, indicateurs utilisés dans toute l’application.

Choisissez selon que les données sont locales au composant ou globales.

Combiner fabrique et singleton

Une fabrique peut également produire un singleton : créez l’état partagé lors de l’appel de la fabrique (qui ne s’exécute qu’une fois), puis faites en sorte que le composable renvoyé le capture dans sa fermeture lexicale.

export function createStore(initial) {
  const state = ref(initial) // created once per factory call
  return function useStore() {
    return { state }
  }
}
export const useCounter = createStore(0)

Quand utiliser une fabrique

Utilisez une fabrique lorsque plusieurs composables partagent une configuration (URL de base, en-têtes, instance cliente), ou lorsque vous construisez une petite bibliothèque et voulez que ses utilisateurs la configurent une seule fois. Sinon, un composable paramétré est plus simple.

Vérification rapide

Vérifiez votre compréhension des fabriques de composables et de leur portée.

Réponds-y dans la leçon interactive

Récapitulatif

Vous avez découvert les fabriques de composables et leur portée :

Les composables paramétrés acceptent des arguments ou des options pour personnaliser leur comportement.
Une fabrique est une fonction qui renvoie un composable préconfiguré (la configuration est capturée dans une fermeture lexicale).
L’état à l’intérieur de la fonction est propre à chaque instance ; l’état au niveau du module est un singleton partagé.
Utilisez une instance distincte pour les données locales à un composant, et un singleton pour l’état utilisé dans toute l’application (utilisateur actuel, thème).

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 42
Leçons: 156

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Fabriques de composables et composables paramétrés » est-elle gratuite ?

Oui — le texte complet de « Fabriques de composables et composables paramétrés » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Fabriques de composables et composables paramétrés » ?

Création de fabriques de composables, portée de l’état par instance et prévention d’un état singleton partagé Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Fabriques de composables et composables paramétrés » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Réactivité avancée : shallowRef et triggerRef
Fabriques de composables et composables paramétrés
Machines à états avec XState dans Vue
effectScope pour regrouper les effets

← Retour à Vue Academy