Статья на VueSchool о том, когда стоит использовать provide/inject

Варианты использования функций provide и inject:

- Настройки темы или конфигурации: Вы можете предоставить глобальные настройки, темы или параметры конфигурации на корневом уровне вашего приложения Vue.js и внедрить их в любой компонент, которому они нужны.

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

- Интернационализация (i18n): Храните данные перевода на корневом уровне и внедряйте их в компоненты, которым требуется отображать текст на разных языках.

- Тесно связанные компоненты: Например, <AccordianPanel>, который всегда появляется только внутри слота компонента <Accordian>. Вы можете инжектировать общие данные, к которым вы всегда хотите иметь доступ, без необходимости передавать их в качестве пропсов.


Лучшие практики и соображения

При использовании provide и inject необходимо помнить о нескольких лучших практиках:

- Избегайте чрезмерного использования: Хотя provide и inject могут быть очень мощными, не стоит ими злоупотреблять. Оставьте их для случаев, когда вам действительно нужно поделиться данными между компонентами, не создавая тесной связи между ними.

- Четкая документация: Документируйте данные, которые вы провайдите и инжектируете, чтобы разработчикам было легко понять, как взаимодействуют компоненты. Их также можно типизировать, - подробности в официальной документации.

- Рассмотрите возможность Prop Drilling: Prop drilling обычно является антипаттерном, но в некоторых случаях передача данных через пропсы может быть более простым и прозрачным подходом. Оцените, являются ли provide и inject лучшим решением для вашего конкретного сценария.

#provide #article #tip

Если попытаться использовать vue-router в js/ts модуле или composable функции,

import { useRouter } from "vue-router";

function foo() {
    const router = useRouter();
}

то выходит ошибка:

[Vue warn]: inject() can only be used inside setup() or functional components.

Это потому, что vue-router, Pinia, PrimeVue.Toast и многие другие библиотеки используют provide/inject для глобального внедрения своих элементов в ваше приложение.

// vuejs/packages/router/src/useApi.ts

export function useRouter(){
    return inject(routerKey)
}

В то же время, provide/inject во Vue работает только в контексте приложения.

Чтобы использовать vue-router в js модулях приходится создавать отдельный синглтон для router, инициализировать его через createRouter() и затем использовать обычный ES импорт где надо. Почему вместо стандартного ES экспорта/импорта сделано такое усложнение через provide/inject не совсем понятно.

Тем не менее, текст вышеуказанной ошибки не совсем корректен, потому что доступ к inject() можно получить явно выполнив код в контексте приложения:

// plugins/debug.ts
import { useRouter } from "vue-router"

export default {
    install(app) {
        app.runWithContext(() => {
            const router = useRouter();
            router.addRoute({ "/debug", () => import('@/views/DebugView.vue') });
        })
    }
}

Это удобно при создании, например, плагинов, когда доступа к своему синглтону router еще нет.

Кстати, на Хабре недавно была большая статья про контексты Vue и Nuxt

#tip #provide #router