子コンポーネントでのinject()
デフォルト値付きのinject()、必須インジェクション、名前空間に使うSymbolキーについて学習します。
「子コンポーネントでのinject()」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
inject 関数
inject は、同じキーを使って祖先コンポーネントが提供した値を取得します。<script setup> で呼び出します。
import { inject } from "vue";
const theme = inject("theme");リアクティビティは維持される
祖先コンポーネントが ref を提供した場合、inject される値は同じ ref です。theme.value の読み取りはリアクティブなままで、提供元が値を変更すると更新されます。
const theme = inject("theme");
// in template: {{ theme }} (auto-unwrapped)デフォルト値を提供する
どの祖先コンポーネントもキーを提供していない場合、inject は undefined を返します。2 番目の引数にデフォルト値を渡すと、コンポーネントを適切に動作させられます。
const theme = inject("theme", "light");
// "light" used when nothing was providedファクトリーデフォルト
オブジェクトや生成コストの高いデフォルト値には、ファクトリ関数を渡し、3 番目の引数を true にします。こうすると、必要な場合にだけデフォルト値が生成されます。
const config = inject("config", () => ({ retries: 3 }), true);アクションを inject する
提供元が関数も提供している場合は、同じ方法で inject し、変更を要求するために呼び出します。変更を管理するのは提供元です。
const updateName = inject("updateName");
updateName("Grace");store オブジェクトを inject する
提供元が state とアクションをまとめている場合は、オブジェクト全体を inject し、必要なものを分割代入します。
const { user, updateName } = inject("userStore");TypeScript で型安全に inject する
Vue は、inject を型安全にするために InjectionKey<T> を提供しています。型付きキーによって、inject される値の形状を TypeScript に正確に伝えられます。
import type { InjectionKey, Ref } from "vue";
export const themeKey: InjectionKey<Ref<string>> = Symbol("theme");型付きキーを使う
型付きキーを使って provide と inject を行います。これで TypeScript が値の型を推論し、不一致を検出してくれます。
provide(themeKey, theme); // theme: Ref<string>
const theme = inject(themeKey); // inferred Ref<string> | undefined一意性のための Symbol キー
キーに Symbol を使うと（InjectionKey と組み合わせることもよくあります）、大規模なコードベースで無関係な provider 同士の文字列キーが衝突することを確実に防げます。
export const authKey = Symbol("auth") as InjectionKey<AuthService>;Provider がない場合に対処する
厳密な構成では、必須の injection が見つからない場合にエラーを投げるとよいでしょう。undefined を黙って使うのではなく、配線の問題を早期に発見できます。
const auth = inject(authKey);
if (!auth) throw new Error("auth provider missing");サブツリー内のどこからでも inject する
どこかの祖先コンポーネントがキーを提供していれば、コンポーネントは深さに関係なく inject できます。途中のコンポーネントに変更を加えずに済むことが、provide/inject の目的です。
確認問題
Provider が存在しない場合、inject("theme", "light") は何を返しますか。
まとめ
inject(key) で提供された値を読み取り、ref のリアクティビティを維持できることを学びました。デフォルト値（またはファクトリ）を渡すと適切なフォールバックを設定でき、Symbol キーと InjectionKey<T> を使うと型安全で衝突のない injection を実現できます。
よくある質問
「子コンポーネントでのinject()」レッスンは無料ですか？
はい。「子コンポーネントでのinject()」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「子コンポーネントでのinject()」で何を学びますか？
デフォルト値付きのinject()、必須インジェクション、名前空間に使うSymbolキーについて学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「子コンポーネントでのinject()」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Prop Drillingの問題
- 親コンポーネントでのprovide()
- 子コンポーネントでのinject()
- アプリレベルの状態管理にProvide/Injectを使う