inject() nei componenti figlio
inject() con valori predefiniti, injection obbligatoria, chiavi Symbol per la gestione degli namespace
inject() nei componenti figlio è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 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.
La funzione inject
inject recupera un valore fornito da un antenato, cercandolo tramite la stessa chiave. La chiami in <script setup>.
import { inject } from "vue";
const theme = inject("theme");La reattività viene preservata
Se l'antenato ha fornito un ref, il valore iniettato è quello stesso ref. La lettura di theme.value resta reattiva e si aggiorna quando il provider lo modifica.
const theme = inject("theme");
// in template: {{ theme }} (auto-unwrapped)Fornire un valore predefinito
Se nessun antenato ha fornito la chiave, inject restituisce undefined. Passi un secondo argomento come valore predefinito, così il componente continua a funzionare correttamente.
const theme = inject("theme", "light");
// "light" used when nothing was providedValori predefiniti creati da factory
Per valori predefiniti che sono oggetti o la cui creazione è costosa, passi una funzione factory e imposti il terzo argomento su true, in modo che il valore predefinito venga creato solo quando necessario.
const config = inject("config", () => ({ retries: 3 }), true);Iniettare azioni
Se il provider ha fornito anche una funzione, la inietti nello stesso modo e la chiami per richiedere modifiche: il provider mantiene la responsabilità della mutazione.
const updateName = inject("updateName");
updateName("Grace");Iniettare un oggetto store
Quando il provider ha raggruppato stato e azioni, inietti l'intero oggetto e destrutturi ciò che le serve.
const { user, updateName } = inject("userStore");Iniezione con sicurezza dei tipi in TypeScript
Vue esporta InjectionKey<T> per rendere l'iniezione sicura dal punto di vista dei tipi. Una chiave tipizzata comunica a TypeScript la forma esatta del valore iniettato.
import type { InjectionKey, Ref } from "vue";
export const themeKey: InjectionKey<Ref<string>> = Symbol("theme");Usare la chiave tipizzata
Fornisca e inietti il valore usando la chiave tipizzata. TypeScript ora deduce il tipo del valore e segnala le incompatibilità.
provide(themeKey, theme); // theme: Ref<string>
const theme = inject(themeKey); // inferred Ref<string> | undefinedChiavi Symbol per l'unicità
L'uso di un Symbol come chiave, spesso insieme a InjectionKey, garantisce l'assenza di collisioni tra stringhe appartenenti a provider non correlati in una codebase di grandi dimensioni.
export const authKey = Symbol("auth") as InjectionKey<AuthService>;Gestire i provider mancanti
In configurazioni rigorose, può essere utile generare un errore quando manca un'iniezione obbligatoria, facendo emergere tempestivamente i problemi di collegamento invece di usare silenziosamente undefined.
const auth = inject(authKey);
if (!auth) throw new Error("auth provider missing");Iniettare in qualsiasi punto del sottoalbero
Un componente può usare inject indipendentemente dalla profondità, purché un antenato abbia fornito la chiave. I componenti intermedi restano intatti: è proprio questo lo scopo di provide/inject.
Verifica rapida
Che cosa restituisce inject("theme", "light") quando non esiste alcun provider?
Riepilogo
Hai imparato che inject(key) legge un valore fornito, preservando la reattività dei ref. Passa un valore predefinito o una factory per un fallback appropriato e usa InjectionKey<T> con chiavi Symbol per un'iniezione sicura dai tipi e priva di collisioni.
Domande Frequenti
La lezione «inject() nei componenti figlio» è gratuita?
Sì — il testo completo di «inject() nei componenti figlio» è 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 «inject() nei componenti figlio»?
inject() con valori predefiniti, injection obbligatoria, chiavi Symbol per la gestione degli namespace 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 3 di 4.
Quanto tempo richiede la lezione «inject() nei componenti figlio»?
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
- Il problema del prop drilling
- provide() nei componenti padre
- inject() nei componenti figlio
- Provide/Inject per lo stato a livello di app