Vue Academy · Lekcja

useCounter: prosty composable

ref count, funkcje increment/decrement, reset oraz udostępnianie tylko niezbędnych elementów.

Lekcja 2 z 413 kroki

useCounter: prosty composable to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Tworzenie useCounter

Napiszemy mały, ale kompletny composable: useCounter. Zarządza on liczbą i udostępnia metody do jej zmiany — to doskonały pierwszy composable.

Przyjmowanie wartości początkowej

Należy dodać do funkcji parametr initial z wartością domyślną, aby wywołujący mogli rozpocząć licznik od dowolnej wartości.

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

Wewnętrzny ref count

Wewnątrz należy utworzyć element ref dla wartości count, zainicjalizowany wartością początkową. To stan reaktywny, którym zarządza composable.

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

Funkcja increment

Należy zdefiniować funkcję, która modyfikuje ref. Ponieważ count jest reaktywny, każdy odbiorca aktualizuje się automatycznie.

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

decrement i reset

Należy dodać uzupełniające operacje. reset korzysta z oryginalnej wartości initial przechwyconej w domknięciu.

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

Zwracanie interfejsu API

Należy zwrócić obiekt zawierający stan reaktywny oraz wszystkie metody. Jest to publiczny interfejs composable.

return { count, increment, decrement, reset };

Pełny composable

Po połączeniu wszystkich elementów całość jest zwięzła i można jej ponownie używać w dowolnym komponencie.

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

Używanie w komponencie

Należy wywołać go w <script setup> i przeprowadzić destrukturyzację. Szablon może bezpośrednio korzystać z count (dzięki automatycznemu rozwijaniu refów) oraz powiązać metody.

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

W szablonie

Należy powiązać metody z przyciskami. Każde kliknięcie modyfikuje współdzielony ref, a widok się aktualizuje.

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

Niezależne instancje

Każde wywołanie useCounter tworzy własny ref count. Dwa komponenty, które go wywołają, otrzymają osobne, odizolowane liczniki.

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

Dodawanie wartości obliczanych

Można wzbogacić composable o stan pochodny, taki jak obliczana wartość isZero, i zwrócić go razem z pozostałymi elementami.

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

Szybkie sprawdzenie

Dlaczego każde wywołanie useCounter otrzymuje własny stan?

Odpowiedz w interaktywnej lekcji

Podsumowanie

Utworzył Pan/Pani useCounter(initial): wewnętrzny ref count, funkcje increment/decrement/reset oraz zwracany obiekt udostępniający stan reaktywny i metody. Każde wywołanie tworzy niezależną instancję.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „useCounter: prosty composable” jest bezpłatna?

Tak — pełny tekst „useCounter: prosty composable” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „useCounter: prosty composable”?

ref count, funkcje increment/decrement, reset oraz udostępnianie tylko niezbędnych elementów. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „useCounter: prosty composable”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Co wyróżnia dobry composable
useCounter: prosty composable
useFetch: composable do danych asynchronicznych
VueUse: biblioteka composable

← Powrót do Vue Academy