provideとinjectは何に使用されますか？

Question

Accepted Answer

`provide`/`inject` により、**祖先コンポーネントが任意の子孫にデータを供給**でき、深さに関係なく、すべての中間コンポーネントを通じてpropsを渡す必要がありません。これは**prop drilling**を解決します。 ## なぜ重要なのか ```text App → Layout → Sidebar → Menu → MenuItem ``` `MenuItem`だけが`theme`を必要とする場合、それを`Layout`、`Sidebar`、および`Menu`(これらはそれを使用しない)を通じてpropとして渡すことは退屈で煩雑です。`provide`/`inject`はその中間を飛ばします。 ## 祖先で提供する ```vue ``` ## 任意の子孫で注入する ```vue ``` ## リアクティブに保つ ```js // ✅ provide a ref/reactive so descendants see updates provide("theme", theme); // theme is a ref → reactive // ❌ provide("theme", theme.value) → passes a snapshot, not reactive ``` **リアクティブ**なオブジェクト(`.value`ではなく`ref`)を提供し、それが変わるとすべての注入コンポーネントが更新されるようにします。 ## ライブラリではSymbolキーを使用する ```js import { themeKey } from "./keys"; // export const themeKey = Symbol() provide(themeKey, theme); // avoids string-key collisions ``` ## provide/inject vs Pinia ```text provide/inject → pass data down a specific subtree (theme, form context, a service) Pinia → global, app-wide shared state (user, cart) usable anywhere ``` `provide`/`inject`は**サブツリー内の依存性注入**に使用します。アプリの真に真のグローバルまたは関連のない部分全体で共有されるような状態にはPiniaを使用してください。 ## なぜ重要なのか `provide`/`inject`は、多くのネストされたコンポーネントが共有するデータ(テーマ、ロケール、フォーム/コンテキスト、プラグインサービス)のprop drillingを排除します。リアクティブ値を提供する方法(更新が伝播するように)、デフォルト/Symbolキーを使用する方法、グローバル状態(Pinia)との区別を知ることにより、深いコンポーネントツリーを通じて共有コンテキストをクリーンに渡すことができます。