Vue Academy · Lekcja

Fabryki composable i composable z parametrami

Tworzenie fabryk composable, zakres stanu dla każdej instancji oraz unikanie współdzielonego stanu singletonu.

Fabryki composable i composable z parametrami 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.

Composable przyjmujące parametry

Zwykły composable zwraca ustalone zachowanie. Parametryzowany composable przyjmuje argumenty, które pozwalają dostosować jego działanie — na przykład adres bazowy, opcje lub wartości domyślne — dzięki czemu jedna funkcja może obsługiwać wiele przypadków.

Prosty parametryzowany composable

Konfigurację przekazuje się jako argumenty. W tym przypadku adres URL jest podawany przez kod wywołujący, więc jeden useFetch działa z dowolnym punktem końcowym.

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

Przyjmowanie obiektu opcji

W przypadku wielu ustawień należy przyjąć obiekt opcji z wartościami domyślnymi. Dzięki temu miejsce wywołania pozostaje czytelne, a composable jest elastyczny.

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

Czym jest fabryka composable

Fabryka idzie o krok dalej: jest funkcją, która zwraca composable wstępnie skonfigurowany za pomocą wspólnych ustawień. Konfigurację wykonuje się raz, a następnie otrzymuje dopasowany composable do użycia w wielu komponentach.

Budowanie fabryki

Funkcja zewnętrzna przechwytuje wspólną konfigurację (np. baseURL), a zwracana funkcja wewnętrzna jest composable, w którym konfiguracja została osadzona dzięki domknięciu.

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

Korzystanie z fabryki

Fabrykę wywołuje się raz (często we współdzielonym module), aby utworzyć skonfigurowany composable, a następnie importuje się go i używa w dowolnym miejscu.

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

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

Stan ograniczony do instancji

Za każdym razem, gdy wywołuje się composable, tworzone przez niego refy są nowe i lokalne dla danego wywołania. Dwa komponenty wywołujące useFetch otrzymują niezależne refy data — bez przypadkowego współdzielenia stanu.

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

Współdzielony singleton na poziomie modułu

Czasami potrzebna jest jedna współdzielona instancja. Stan należy zadeklarować na poziomie modułu (poza funkcją), a composable będzie miał do niego dostęp dzięki domknięciu — wszystkie miejsca wywołania będą współdzielić te same refy.

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

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

Instancja a singleton

Stan wewnątrz funkcji → nowy przy każdym wywołaniu (dla każdego komponentu) — formularze, narzędzia do pobierania danych.
Stan na poziomie modułu → współdzielony singleton — bieżący użytkownik, motyw, flagi obowiązujące w całej aplikacji.

Należy wybrać rozwiązanie zależnie od tego, czy dane są lokalne dla komponentu, czy globalne.

Łączenie fabryki z singletonem

Fabryka może również tworzyć singleton: należy utworzyć współdzielony stan wewnątrz wywołania fabryki (wykonywanego raz), a następnie sprawić, aby zwracany composable miał do niego dostęp dzięki domknięciu.

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

Kiedy warto użyć fabryki

Fabryka jest przydatna, gdy kilka composable współdzieli konfigurację (adres bazowy, nagłówki, instancję klienta) lub gdy buduje się małą bibliotekę i chce się umożliwić użytkownikom jednokrotną konfigurację. W pozostałych przypadkach prostszy będzie parametryzowany composable.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat fabryk composable i zakresu stanu.

Podsumowanie

Poznałeś fabryki composable i zakres stanu:

Parametryzowane composable przyjmują argumenty lub opcje dostosowujące ich działanie.
Fabryka jest funkcją zwracającą wstępnie skonfigurowany composable (konfiguracja jest przechwytywana przez domknięcie).
Stan wewnątrz funkcji jest osobny dla każdej instancji, a stan na poziomie modułu jest współdzielonym singletonem.
Stan osobny dla instancji należy stosować w przypadku danych lokalnych dla komponentu, a singleton w przypadku stanu obowiązującego w całej aplikacji (bieżącego użytkownika, motywu).

Często zadawane pytania

Czy lekcja „Fabryki composable i composable z parametrami” jest bezpłatna?

Tak — pełny tekst „Fabryki composable i composable z parametrami” 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 „Fabryki composable i composable z parametrami”?

Tworzenie fabryk composable, zakres stanu dla każdej instancji oraz unikanie współdzielonego stanu singletonu. Ć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 „Fabryki composable i composable z parametrami”?

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

Zaawansowana reaktywność: shallowRef i triggerRef
Fabryki composable i composable z parametrami
Maszyny stanów z XState w Vue
effectScope do grupowania efektów

← Powrót do Vue Academy