0Pricing
Frontend Academy · Lekcja

provide() i inject() do wstrzykiwania zależności

Udostępni Pan/Pani wartości w komponencie przodka i wstrzyknie je głęboko w drzewie, unikając przekazywania propsów przez wiele poziomów bez używania pełnej biblioteki zarządzania stanem.

provide() i inject() do wstrzykiwania zależności to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Problem przekazywania właściwości

Czasami dane znajdują się w komponencie wysoko w hierarchii i muszą dotrzeć do głęboko zagnieżdżonego potomka. Przekazywanie ich przez każdy komponent pośredni (prop drilling) jest uciążliwe i podatne na błędy.

provide() — deklarowanie wartości

Komponent przodka wywołuje provide(key, value) w setup(). Wartość staje się dostępna dla wszystkich potomków.

<!-- ParentComponent.vue -->
<script setup>
import { provide, ref } from 'vue';

const theme = ref('dark');
provide('theme', theme);
</script>

inject() — odczytywanie wartości

Dowolny potomek wywołuje inject(key), aby ją odczytać.

<!-- DeepChild.vue -->
<script setup>
import { inject } from 'vue';

const theme = inject('theme');
</script>

<template>
  <div :class="theme">Theme is: {{ theme }}</div>
</template>

Reaktywność z ref/reactive

Jeśli udostępnią Państwo obiekt ref lub reactive, potomkowie otrzymają reaktywną wartość — aktualizacje będą propagowane automatycznie.

// Parent
const user = reactive({ name: 'Alice', role: 'admin' });
provide('user', user);

// Anywhere descendant
const user = inject('user');
user.role; // 'admin' — reactive

Klucze Symbol zapobiegające kolizjom

Klucze tekstowe stwarzają ryzyko kolizji w dużych aplikacjach. Symbole gwarantują unikalność — należy definiować je we współdzielonym pliku.

// keys.ts
export const ThemeKey = Symbol('theme');
export const UserKey  = Symbol('user');

// Parent
provide(ThemeKey, ref('dark'));
// Child
const theme = inject(ThemeKey);

Obsługa TypeScript

Należy użyć InjectionKey<T>, aby zapewnić bezpieczeństwo typów po obu stronach.

import type { InjectionKey, Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

// Provider:
provide(ThemeKey, ref('dark'));

// Consumer (type-checked):
const theme = inject(ThemeKey); // Ref<string> | undefined

Wartości domyślne

Jeśli żaden przodek nie udostępni danego klucza, inject zwróci undefined, chyba że przekażą Państwo wartość domyślną.

const theme = inject('theme', 'light'); // default if missing
const lazy  = inject('user', () => createDefaultUser(), true); // factory

Wartości udostępniane tylko do odczytu

Aby uniemożliwić potomkom modyfikowanie współdzielonego stanu, należy opakować go w readonly().

import { readonly } from 'vue';

const user = reactive({ name: 'Alice' });
provide('user', readonly(user));
// Children can read but cannot mutate

Udostępnianie na poziomie aplikacji

Należy udostępniać wartości na poziomie aplikacji, aby były dostępne wszędzie — jest to przydatne w przypadku wtyczek.

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.provide('apiClient', new ApiClient());
app.mount('#app');

Opakowanie w composable

Proszę opakować provide/inject w composable, aby uzyskać przejrzystszy interfejs API dla odbiorców.

// useTheme.ts
import { inject, type InjectionKey, type Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

export function useTheme() {
  const theme = inject(ThemeKey);
  if (!theme) throw new Error('useTheme: no provider in tree');
  return theme;
}

provide/inject a Pinia

provide/inject: lekkie rozwiązanie, niewymagające biblioteki, idealne dla wartości udostępnianych w stylu wtyczek (motyw, ustawienia regionalne, bieżący użytkownik). Pinia: pełne zarządzanie stanem z DevTools, optymalne dla reaktywnego stanu obejmującego całą aplikację i złożonych aktualizacji.

Szybkie sprawdzenie

Jaki sposób zaleca się stosować, aby uniknąć kolizji kluczy przy używaniu provide/inject w dużej aplikacji Vue?

Podsumowanie: provide/inject

Przodek udostępnia wartość, a potomek ją wstrzykuje — bez prop drilling. Wartości reaktywne (ref/reactive) są propagowane reaktywnie. Klucze Symbol oraz InjectionKey zapewniają bezpieczne typowanie i eliminują kolizje podczas wstrzykiwania. Wartość domyślna jest drugim argumentem inject. readonly() zapobiega modyfikacjom. Udostępnianie na poziomie aplikacji sprawdza się w przypadku wtyczek obejmujących całą aplikację. Jest to lekka alternatywa dla Pinia w przypadku wartości udostępnianych w stylu wtyczek.

Często zadawane pytania

Czy lekcja „provide() i inject() do wstrzykiwania zależności” jest bezpłatna?

Tak — pełny tekst „provide() i inject() do wstrzykiwania zależności” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „provide() i inject() do wstrzykiwania zależności”?

Udostępni Pan/Pani wartości w komponencie przodka i wstrzyknie je głęboko w drzewie, unikając przekazywania propsów przez wiele poziomów bez używania pełnej biblioteki zarządzania stanem. Ćwiczysz Frontend 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ąć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend 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 1 z 4.

Ile czasu zajmuje lekcja „provide() i inject() do wstrzykiwania zależności”?

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 Frontend Academy?

Tak. Każda lekcja Frontend 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

  1. provide() i inject() do wstrzykiwania zależności
  2. Komponenty asynchroniczne i Suspense
  3. Własne dyrektywy
  4. System wtyczek: app.use()
← Powrót do Frontend Academy