Vue Academy · Lezione

useCounter: un composable semplice

ref per il conteggio, funzioni di incremento/decremento, reset, esposizione del solo necessario.

useCounter: un composable semplice è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Creare useCounter

Scriveremo un composable piccolo ma completo: useCounter. Gestisce un numero ed espone metodi per modificarlo: è il primo composable ideale.

Accettare un valore iniziale

Fornisca alla funzione un parametro initial con un valore predefinito, così chi la chiama può iniziare il contatore da un punto qualsiasi.

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

Il ref count interno

All'interno, crei un ref per il conteggio e lo inizializzi con il valore iniziale. Questo è lo stato reattivo gestito dal composable.

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

La funzione increment

Definisca una funzione che modifichi il ref. Poiché count è reattivo, ogni componente che lo usa si aggiorna automaticamente.

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

decrement e reset

Aggiunga le azioni complementari. reset usa il valore originale di initial catturato nella closure.

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

Restituire l'API

Restituisca un oggetto con lo stato reattivo e tutti i metodi. Questa è l'interfaccia pubblica del composable.

return { count, increment, decrement, reset };

Il composable completo

Una volta assemblato, l'intero composable è compatto e riutilizzabile in qualsiasi componente.

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 };
}

Usarlo in un componente

Lo chiami in <script setup> e lo destrutturi. Il template può usare direttamente count (con auto-unwrapping) e collegare i metodi.

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

Nel template

Colleghi i metodi ai pulsanti. Ogni clic modifica il ref condiviso e la vista si aggiorna.

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

Istanze indipendenti

Ogni chiamata a useCounter crea il proprio ref count. Due componenti che lo chiamano ottengono contatori separati e isolati.

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

Aggiungere valori computed

È possibile arricchire il composable con uno stato derivato, come un computed isZero, da restituire insieme al resto.

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

Verifica rapida

Perché ogni chiamata a useCounter ottiene il proprio stato?

Riepilogo

Ha creato useCounter(initial): un ref count interno, le funzioni increment/decrement/reset e un oggetto restituito che espone lo stato reattivo e i metodi. Ogni chiamata produce un'istanza indipendente.

Domande Frequenti

La lezione «useCounter: un composable semplice» è gratuita?

Sì — il testo completo di «useCounter: un composable semplice» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «useCounter: un composable semplice»?

ref per il conteggio, funzioni di incremento/decremento, reset, esposizione del solo necessario. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «useCounter: un composable semplice»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy