Для чего используются provide и inject?

Question

Accepted Answer

`provide`/`inject` позволяют **родительскому компоненту передавать данные любому потомку**, независимо от глубины вложенности, без передачи props через каждый промежуточный компонент. Они решают проблему **prop drilling**. ## Проблема: prop drilling ```text App → Layout → Sidebar → Menu → MenuItem ``` Если только `MenuItem` нужна `theme`, передача её как prop через `Layout`, `Sidebar` и `Menu` (которые её не используют) громоздко и шумно. `provide`/`inject` пропускают промежуточные звенья. ## Providing в родительском компоненте ```vue ``` ## Injecting в любом потомке ```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 ``` Передавайте **реактивный** объект (сам `ref`, а не его `.value`), чтобы при изменении все внедрённые компоненты обновились. ## Используйте 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), позволяет вам чистым способом передавать общий контекст через глубокие деревья компонентов.