Vue Academy · レッスン

アプリレベルの状態管理にProvide/Injectを使う

グローバル状態、テーマ、i18nに使うapp.provide()、単純なケースでPiniaを避ける方法について学習します。

レッスン 4/413 ステップ

「アプリレベルの状態管理にProvide/Injectを使う」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

アプリケーションレベルの provide

コンポーネントレベルの provide に加えて、app.provide を使ってアプリインスタンスに値を提供できます。その値は、アプリ内のすべてのコンポーネントから利用できるようになります。

const app = createApp(App);
app.provide("appVersion", "1.0.0");

グローバルサービスを提供する

アプリケーションレベルの provide は、認証サービス、HTTP クライアント、ロガーなど、アプリ全体で必要になるシングルトンに適しています。

import { authService } from "./auth";
app.provide("auth", authService);

グローバルサービスを利用する

どのコンポーネントからでも、ツリー内の位置に関係なく、キーを使ってサービスを inject できます。prop drilling も追加の配線も必要ありません。

const auth = inject("auth");
auth.login(credentials);

グローバル用の Symbol キー

アプリ全体で使うサービスには、export した Symbol キー（できれば型付き）を使うと、コードベース全体で安全かつ見つけやすい injection を実現できます。

// keys.ts
export const authKey: InjectionKey<AuthService> = Symbol("auth");
// main.ts
app.provide(authKey, authService);

検索の優先順位

アプリケーションレベルとコンポーネントレベルの provide が同じキーを使っている場合、そのコンポーネントの子孫には最も近い provider の値が使われます。アプリケーションレベルの値はグローバルなフォールバックとして機能します。

読み取り中心の場面

provide/inject は、テーマ、ロケール、設定などの共有データを多くのコンポーネントが読み取るだけの場合に特に適しています。利用側で書き込む必要がないため、シンプルで予測しやすいパターンになります。

Pinia と比較する

Pinia は Vue の公式 state management ライブラリです。devtools、モジュール化された store、アクション、getter、タイムトラベルデバッグを提供しており、複雑で頻繁に変更されるグローバル state に適しています。

import { defineStore } from "pinia";
export const useAuth = defineStore("auth", { /* ... */ });

provide/inject で十分な場面

ほとんど読み取り専用の共有値には、store のオーバーヘッドを避けられる provide/inject が適しています。軽量で組み込みの機能であり、テーマ、i18n、inject するサービスなどに分かりやすく使えます。

Pinia を選ぶ場面

多くの場所から state を変更する場合、devtools が必要な場合、永続化が必要な場合、または複雑な派生データがある場合は Pinia を選びます。分散した provide/inject の組み合わせよりも、ロジックを適切に一元化できます。

両方を組み合わせる

両者は排他的ではありません。アプリのデータには Pinia を使い、フォームや UI テーマのような軽量なコンポーネントツリーのコンテキストには provide/inject を使うこともできます。

provide("formContext", { register, errors });

テスト時の考慮事項

inject を使うコンポーネントを単体テストする場合は、テストの mount オプションにある global.provide を通して値を渡すと、コンポーネントにスタブを提供できます。

mount(MyComponent, {
  global: { provide: { auth: fakeAuth } }
});

確認問題

Pinia よりも provide/inject を選ぶのは、どのような場合でしょうか。

対話的なレッスンで答える

まとめ

app.provide によってグローバルサービスをすべてのコンポーネントに公開し、どこからでも inject とキーを使って利用できることを学びました。provide/inject は読み取り中心の共有コンテキストに適しており、Pinia は devtools に対応した、複雑で頻繁に変更されるグローバル state に適しています。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 42
レッスン: 156

無料で学習を始めるコース全体を表示

よくある質問

「アプリレベルの状態管理にProvide/Injectを使う」レッスンは無料ですか？

はい。「アプリレベルの状態管理にProvide/Injectを使う」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「アプリレベルの状態管理にProvide/Injectを使う」で何を学びますか？

グローバル状態、テーマ、i18nに使うapp.provide()、単純なケースでPiniaを避ける方法について学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「アプリレベルの状態管理にProvide/Injectを使う」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る