0Pricing
Vue Academy · Leçon

useCounter : un composable simple

Référence count, fonctions increment/decrement, réinitialisation et exposition des seuls éléments nécessaires

useCounter : un composable simple 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.

Créer useCounter

Nous allons écrire un composable petit mais complet : useCounter. Il gère un nombre et expose des méthodes pour le modifier : un premier composable idéal.

Accepter une valeur initiale

Donnez à la fonction un paramètre initial avec une valeur par défaut afin que les appelants puissent commencer le compteur à n'importe quelle valeur.

function useCounter(initial = 0) {
  // ...
}

La référence count interne

À l'intérieur, créez une ref pour le compteur, initialisée avec la valeur initiale. Il s'agit de l'état réactif géré par le composable.

import { ref } from "vue";
function useCounter(initial = 0) {
  const count = ref(initial);
}

La fonction increment

Définissez une fonction qui modifie la référence. Comme count est réactif, chaque appelant se met à jour automatiquement.

function increment() {
  count.value++;
}

decrement et reset

Ajoutez les actions complémentaires. reset utilise la valeur originale de initial, capturée dans la fermeture.

function decrement() {
  count.value--;
}
function reset() {
  count.value = initial;
}

Renvoyer l'API

Renvoyez un objet contenant l'état réactif et toutes les méthodes. C'est l'interface publique du composable.

return { count, increment, decrement, reset };

Le composable complet

Une fois assemblé, l'ensemble est compact et réutilisable dans n'importe quel composant.

import { ref } from "vue";
export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initial;
  return { count, increment, decrement, reset };
}

L'utiliser dans un composant

Appelez-le dans <script setup> et déstructurez le résultat. Le modèle peut utiliser count directement (déballé automatiquement) et lier les méthodes.

const { count, increment, decrement, reset } = useCounter(10);

Dans le modèle

Reliez les méthodes aux boutons. Chaque clic modifie la référence partagée et la vue se met à jour.

<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>

Instances indépendantes

Chaque appel à useCounter crée sa propre référence count. Deux composants qui l'appellent obtiennent des compteurs distincts et isolés.

const a = useCounter();   // own count
const b = useCounter(100); // own count

Ajouter des éléments calculés

Vous pouvez enrichir le composable avec un état dérivé, comme une valeur calculée isZero, renvoyée avec le reste.

import { computed } from "vue";
const isZero = computed(() => count.value === 0);
// add to return: { count, isZero, increment, ... }

Vérification rapide

Pourquoi chaque appel à useCounter obtient-il son propre état ?

Récapitulatif

Vous avez créé useCounter(initial) : une référence count interne, les fonctions increment/decrement/reset et un objet renvoyé exposant l'état réactif ainsi que les méthodes. Chaque appel produit une instance indépendante.

Questions Fréquemment Posées

La leçon « useCounter : un composable simple » est-elle gratuite ?

Oui — le texte complet de « useCounter : un composable simple » 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 « useCounter : un composable simple » ?

Référence count, fonctions increment/decrement, réinitialisation et exposition des seuls éléments nécessaires 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 « useCounter : un composable simple » ?

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

  1. Caractéristiques d’un bon composable
  2. useCounter : un composable simple
  3. useFetch : un composable de données asynchrones
  4. VueUse : la bibliothèque de composables
← Retour à Vue Academy