Comments 14
Если требуется передать свойство, которое ещё и надо иметь возможность изменить, имхо, лучше его обернуть в ридонли и рядом прокинуть метод для изменения этого самого свойства
В документации рекомендуется использовать для обозначения ключей тип Symbol
А как же тайпчекинг? В Реакте такой "ключ" создается через createContext и содержит в себе типизацию, например в случае const ctx = createContext<string>(''), во первых, нельзя воткнуть не строку в провайдер ctx, во вторых useContext(ctx) типизирует результат строкой.
Не совсем понятно, как это сделать с симболом.
interface AppKeyData {
name: string
}
const AppKey = Symbol('AppKey') as InjectionKey<UnwrapNestedRefs<AppKeyData>>
Обычно я не рекомендую напрямую юзать provide / inject а сделать композабл (ака хук в реакте) и в нем типизировать значения относительно provide / inject. Если хочется, то сделать ~99%-ую компию по API контексту из реакта можно в строк 30-50
Главная проблема в том, что подход "пропсы вниз - сообщения вверх" придуманы не просто так, а чтобы не распутывать потом клубок "кто-же где-же таки изменил эту переменную?!"
По-этому, ИМХО (и собственно так в официальной документации) - инжектить любую переменную нужно через readonly вместе с методом, который может эту переменную изменять, и в компоненте не изменять данную переменную напрямую, а использовать метод. Это реально уберегает от очень многих головняков (хотя бы потому, что для простой отладки будет достаточно добавить в данный метод печать трейса, чтобы понять "кто-же где-же").
Исключения, естественно, есть - очень тесно связанные компоненты и не более одного уровня (т.е. родитель-ребенок). Например табы (родительский холдер и его дети, собственно, сами табы). Но и там, чтобы не плодить "везде делаем так, а вот здесь можно не так" и поддерживать некоторую гомогенность системы, я бы все сделал через readonly + метод.
Во втором вуе они тоже есть, только там переменные теряют реактивность.
Использую для показа попапа с ошибками, который лежит далеко наверху, а также для показа прелоадера при загрузке чего-либо в любом из потомков. Но из-за нереактивных переменных не могу в дочерних компонентах реагировать на изменение какого-нибудь isLoading. Наверное можно попробовать слать из родителя функцию, в которой потомкам можно регистрировать колбэки, которые будут вызываться при запуске прелоадера, только потом ещё не забывать их удалять.
Лучше в 95% случаев использовать композаблы:
Нет ограничений на требование предок-потомок
Дополнительный уровень иерархичности:
import { isLoggedIn } from "auth";auth- scope, аутентификацияisLoggedIn- конкретная функциональность
Сразу понятна семантика и файл, где искатьisLoggedInconst data: = inject(isLoggedIn)
Откуда inject??? В каком скоупе? Где его искать?Намного структурированней, чище и понятней код
как раз для "откуда inject???" я специально выделил - НАЗЫВАЙТЕ КЛЮЧИ так, чтобы было понятно что и откуда.
И я подчеркиваю, и не раз, что этот механизм не является ЗАМЕНОЙ пропсам, я лишь написал ГАЙД как его использовать с минимальными потерями читаемости и безопасности
Ну-ка назовите в данном случае ключ чтобы было понятно что это, откуда и зачем
попробуйте прочитать статью, там ясно написано как называть ключи) Из какого компонента мы провайдим, так и называть DATA_FROM_somecomponent_VUE
То есть надо называть `IS_LOGGED_IN_FROM_App_VUE`, правильно?
const isLoggedIn: = inject(IS_LOGGED_IN_FROM_App_VUE)
вместо
import { isLoggedIn } from "./services/auth";
Совершенно не понимаю к чему вы ведете? Я не призываю пользоваться provide-inject. Я показал, как его МОЖНО использовать. Если у вас другое мнение, вперед, открываем сверху справа есть иконка карандаша, запилите свою статью о том, как пользоваться композаблами. Вы пытаетесь в ГАЙД засунуть холивар о том, что лучше юзать - зачем?
Vue3 provide-inject di