Provide/Inject для состояния на уровне приложения
app.provide() для глобального состояния, темизации и i18n, отказ от Pinia в простых случаях
«Provide/Inject для состояния на уровне приложения» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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);Использование глобальной службы
Любой компонент может внедрить службу по ключу в любой части дерева, без проброса props и дополнительной связующей логики.
const auth = inject("auth");
auth.login(credentials);Ключи Symbol для глобальных значений
Для служб, доступных всему приложению, экспортируемые ключи Symbol (желательно типизированные) делают внедрение безопасным и понятным во всей кодовой базе.
// keys.ts
export const authKey: InjectionKey<AuthService> = Symbol("auth");
// main.ts
app.provide(authKey, authService);Порядок поиска
Если provide на уровне приложения и provide на уровне компонента используют один ключ, для потомков этого компонента побеждает ближайший поставщик. Уровень приложения выступает глобальным резервным вариантом.
Сценарии с преимущественным чтением
Provide и внедрение особенно эффективны, когда многие компоненты только читают общие данные — тему, локаль, config. Потребителям не нужно выполнять запись, поэтому этот шаблон остаётся простым и предсказуемым.
Сравнение с Pinia
Pinia — официальная библиотека управления состоянием Vue. Она предоставляет инструменты разработчика, модульные хранилища, действия, геттеры и отладку с перемоткой во времени, поэтому идеально подходит для сложного глобального состояния, которое часто изменяется.
import { defineStore } from "pinia";
export const useAuth = defineStore("auth", { /* ... */ });Когда достаточно provide и внедрения
Для преимущественно предназначенных только для чтения общих значений provide и внедрение позволяют обойтись без дополнительных затрат на хранилище. Это встроенный, более лёгкий и понятный вариант для темы, локализации или внедряемых служб.
Когда стоит выбрать Pinia
Выбирайте Pinia, если состояние изменяется из многих мест, требует инструментов разработчика, должно сохраняться или содержит сложные производные данные. Pinia лучше централизует логику, чем разрозненные пары provide и внедрения.
Совместное использование
Они не исключают друг друга. Например, Pinia можно использовать для данных приложения, а provide и внедрение — для лёгкого контекста дерева компонентов, такого как форма или тема интерфейса.
provide("formContext", { register, errors });Особенности тестирования
При модульном тестировании компонента, который использует внедрение, передайте значение через параметры монтирования теста global.provide, чтобы компонент получил замену.
mount(MyComponent, {
global: { provide: { auth: fakeAuth } }
});Быстрая проверка
Когда provide и внедрение предпочтительнее Pinia?
Повторение
Вы узнали, что app.provide открывает глобальные службы для каждого компонента, а получить их по ключу в любой части дерева можно через inject. Provide и внедрение особенно полезны для общего контекста, который в основном читают, тогда как Pinia подходит для сложного глобального состояния, которое часто изменяется, и поддерживает инструменты разработчика.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 42
- Уроки
- 156
Часто задаваемые вопросы
Урок «Provide/Inject для состояния на уровне приложения» бесплатный?
Да — полный текст урока «Provide/Inject для состояния на уровне приложения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Provide/Inject для состояния на уровне приложения»?
app.provide() для глобального состояния, темизации и i18n, отказ от Pinia в простых случаях Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Provide/Inject для состояния на уровне приложения»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Проблема передачи свойств через всю иерархию
- provide() в родительских компонентах
- inject() в дочерних компонентах
- Provide/Inject для состояния на уровне приложения