Vue Academy · Урок

Глобальные свойства и provide/inject в плагинах

app.config.globalProperties.$myPlugin, app.provide() для внедрения и расширение типов TypeScript

Урок 2 из 413 шагов

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

Два способа предоставить сервисы

Плагины могут предоставлять функциональность двумя способами: глобальными свойствами — классическим стилем Options API, доступным через this.$x, — и механизмом provide/внедрение — стилем Composition API. В современном коде предпочтителен механизм provide/внедрение, но глобальные свойства по-прежнему полезны в кодовых базах на Options API.

app.config.globalProperties

app.config.globalProperties.$http = client делает this.$http доступным в каждом компоненте Options API. По соглашению перед именем ставят $, чтобы избежать конфликтов с данными компонента.

import axios from 'axios'

export default {
  install(app, options) {
    const http = axios.create({ baseURL: options.baseURL })
    app.config.globalProperties.$http = http
  }
}

Использование $http в Options API

Внутри компонента Options API доступ к глобальному свойству осуществляется через this.

export default {
  async created() {
    const res = await this.$http.get('/users')
    this.users = res.data
  },
  data() {
    return { users: [] }
  }
}

Почему Composition API не может использовать this

В <script setup> нет this, связанного с экземпляром компонента. Поэтому this.$http не работает. Вместо этого Composition API читает внедрённые значения, что является рекомендуемым подходом.

<script setup>
// this is undefined here, so this.$http is NOT available
// use inject() instead
</script>

Предоставление в плагине

Чтобы поддержать Composition API, плагин также должен вызвать app.provide для того же сервиса, используя ключ. Предоставьте оба варианта: глобальное свойство для Options API и значение через provide для Composition API.

export const httpKey = Symbol('http')

export default {
  install(app, options) {
    const http = createHttp(options)
    app.config.globalProperties.$http = http // Options API
    app.provide(httpKey, http)               // Composition API
  }
}

Внедрение в Composition API

Компоненты читают сервис с помощью inject(httpKey). Использование экспортируемого ключа Symbol предотвращает опечатки в строках и позволяет добавить типизацию.

<script setup>
import { inject } from 'vue'
import { httpKey } from './plugins/http'

const http = inject(httpKey)
const res = await http.get('/profile')
</script>

Типизированные ключи внедрения с InjectionKey

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

import type { InjectionKey } from 'vue'
import type { AxiosInstance } from 'axios'

export const httpKey: InjectionKey<AxiosInstance> =
  Symbol('http')

// inject(httpKey) is now typed as AxiosInstance | undefined

Типизация $http с помощью расширения модуля

Чтобы сделать this.$http типобезопасным, расширьте интерфейс ComponentCustomProperties Vue в файле .d.ts. После этого TypeScript будет знать тип this.$http повсюду.

// shims.d.ts
import type { AxiosInstance } from 'axios'

declare module 'vue' {
  interface ComponentCustomProperties {
    $http: AxiosInstance
  }
}

export {}

Где находится расширение

Расширение должно быть модулем — обратите внимание на завершающую конструкцию export {} — и включаться через tsconfig.json. Разместите его рядом с плагином, чтобы типы поставлялись вместе с ним при публикации.

// tsconfig.json (excerpt)
{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

Глобальные свойства: используйте умеренно

Глобальные свойства удобны, но создают скрытые зависимости: из-за них компоненты сложнее проверять и анализировать. Предпочитайте provide/inject — явный механизм, ограниченный деревом компонентов. Оставляйте глобальные свойства для действительно общих для приложения утилит, удобных в Options API.

Поддержка обоих подходов

Качественный плагин поддерживает и Options API, и Composition API: задаёт глобальное свойство И предоставляет значение, а также поставляет расширение типов для глобального свойства и типизированного ключа внедрения. Пользователь может выбрать подходящий для стиля его компонента вариант.

install(app, options) {
  const service = build(options)
  app.config.globalProperties.$service = service
  app.provide(serviceKey, service)
}

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

Проверьте своё понимание глобальных свойств и механизмов provide/inject в плагинах.

Ответь в интерактивном уроке

Итоги

Вы изучили способы предоставления сервисов плагина:

app.config.globalProperties.$http обеспечивает работу this.$http в Options API
В Composition API нет this; вместо него используется inject
Для полной поддержки предоставляйте и глобальное свойство, и значение через provide
Типизируйте this.$http, расширяя ComponentCustomProperties
Для пути внедрения используйте типизированный InjectionKey

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

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

Урок «Глобальные свойства и provide/inject в плагинах» бесплатный?

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

Чему я научусь в уроке «Глобальные свойства и provide/inject в плагинах»?

app.config.globalProperties.$myPlugin, app.provide() для внедрения и расширение типов TypeScript Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Глобальные свойства и provide/inject в плагинах»?

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

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

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

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

Архитектура плагинов и app.use()
Глобальные свойства и provide/inject в плагинах
Пример плагина уведомлений и всплывающих сообщений
Публикация и типизация плагинов Vue

← Назад к Vue Academy