0Pricing
Vue Academy · Урок

inject() в дочерних компонентах

inject() со значениями по умолчанию, обязательная инъекция, ключи Symbol для пространств имён

«inject() в дочерних компонентах» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Функция внедрения

inject получает значение, переданное предком, находя его по тому же ключу. Вызовите её в <script setup>.

import { inject } from "vue";
const theme = inject("theme");

Реактивность сохраняется

Если предок передал ref, внедрённое значение является тем же ref. Чтение theme.value остаётся реактивным и обновляется при изменении значения поставщиком.

const theme = inject("theme");
// in template: {{ theme }} (auto-unwrapped)

Значение по умолчанию

Если ни один предок не передал ключ, inject возвращает undefined. Передайте второй аргумент со значением по умолчанию, чтобы компонент корректно работал в такой ситуации.

const theme = inject("theme", "light");
// "light" used when nothing was provided

Значения по умолчанию через фабрику

Для объектов или ресурсоёмких значений по умолчанию передайте фабричную функцию и установите третий аргумент в true, чтобы значение по умолчанию создавалось только при необходимости.

const config = inject("config", () => ({ retries: 3 }), true);

Внедрение действий

Если поставщик также передал функцию, внедрите её таким же способом и вызывайте для запроса изменений — поставщик сохраняет контроль над изменением состояния.

const updateName = inject("updateName");
updateName("Grace");

Внедрение объекта хранилища

Если поставщик объединил состояние и действия, внедрите весь объект и извлеките из него нужные значения.

const { user, updateName } = inject("userStore");

Типобезопасное внедрение в TypeScript

Vue экспортирует InjectionKey<T>, чтобы сделать внедрение типобезопасным. Типизированный ключ сообщает TypeScript точную структуру внедрённого значения.

import type { InjectionKey, Ref } from "vue";
export const themeKey: InjectionKey<Ref<string>> = Symbol("theme");

Использование типизированного ключа

Передавайте и внедряйте значение с помощью типизированного ключа. Теперь TypeScript выводит тип значения и обнаруживает несоответствия.

provide(themeKey, theme);          // theme: Ref<string>
const theme = inject(themeKey);    // inferred Ref<string> | undefined

Ключи Symbol для уникальности

Использование Symbol в качестве ключа (часто вместе с InjectionKey) гарантирует отсутствие конфликтов строковых ключей между несвязанными поставщиками в большой кодовой базе.

export const authKey = Symbol("auth") as InjectionKey<AuthService>;

Обработка отсутствующих поставщиков

В строгих конфигурациях может потребоваться выдавать ошибку, если обязательное внедряемое значение отсутствует. Так ошибки связывания обнаруживаются на раннем этапе, а не скрываются за молчаливым использованием undefined.

const auth = inject(authKey);
if (!auth) throw new Error("auth provider missing");

Внедрение в любом месте поддерева

Компонент может внедрить значение независимо от глубины, если какой-либо предок передал этот ключ. Промежуточные компоненты остаются без изменений — в этом и заключается смысл provide и внедрения.

Быстрая проверка

Что возвращает inject("theme", "light"), если поставщик отсутствует?

Повторение

Вы узнали, что inject(key) считывает переданное значение, сохраняя реактивность ref. Передавайте значение по умолчанию (или фабрику) для корректной работы при отсутствии поставщика, а для типобезопасного внедрения без конфликтов используйте InjectionKey<T> с ключами Symbol.

Часто задаваемые вопросы

Урок «inject() в дочерних компонентах» бесплатный?

Да — полный текст урока «inject() в дочерних компонентах» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «inject() в дочерних компонентах»?

inject() со значениями по умолчанию, обязательная инъекция, ключи Symbol для пространств имён Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «inject() в дочерних компонентах»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Проблема передачи свойств через всю иерархию
  2. provide() в родительских компонентах
  3. inject() в дочерних компонентах
  4. Provide/Inject для состояния на уровне приложения
← Назад к Vue Academy