В большинстве статей вы можете прочитать об использовании определенных функций или возможностей, предоставляемых Vue. Но кому-то сложно определить подходящий вариант использования, например когда и зачем использовать inject / provide?
Я предполагаю, что вы понимаете или, по крайней мере, имеете какое-то представление о Inject / Provide, Dependency Injection, разделении кода и Vue js.
Этот следующий раздел может помочь вам прояснить эту путаницу, если вы новичок или пытаетесь использовать эту функцию в vue. Я могу помочь вам понять один вариант использования инъекции / предоставления для крупномасштабных корпоративных приложений, в которых много SPA можно использовать как индивидуально, так и в сотрудничестве.
G eneally inject / provide должен использоваться для более высокого уровня и сложного дизайна, когда вы хотите построить экосистему с многоразовыми большими компонентами пользовательского интерфейса (с разделением кода и Vue-Vuex), которые достаточно велики, чтобы действовать как одностраничное приложение. сами по себе.
Прежде чем мы перейдем к обсуждению, позвольте мне представиться. Я разработчик JavaScript, который потратил большую часть своего времени на поиск решений сложных бизнес-задач для веб-приложений.
Работая над проектами в реальном времени в мире постоянно развивающихся технологий, нам всегда нужно создавать подключаемую систему или, проще говоря, повторно используемые компоненты, это может быть микросервис, адаптер базы данных или компонент пользовательского интерфейса (SPA). Это означает, что мы можем легко заменить его, когда некоторые требования изменятся или нам потребуется его улучшить.
Один интересный вариант использования с vue заключается в том, что он должен поставлять зависимое хранилище vuex module, когда мы хотим сделать его независимым повторно используемым компонентом, если мы пытаемся разработать сложный компонент, такой как сетка, комментарий, бесконечная прокрутка с данные и т. д. для использования в качестве плагина в различных проектах и репозиториях в организации.
Строки выше могут сбивать с толку то, что я хочу сказать в контексте многоразового и подключаемого. Итак, позвольте мне объяснить это, я не могу отправить весь пакет файлов при первой загрузке моего корпоративного веб-приложения в производстве, поскольку может быть много js-кода, который не будет использоваться для пользователя в качестве моего каждого вкладка действует как одностраничное приложение.
В зависимости от ролей пользователя я могу загружать вкладки. Я могу разделить код таким образом, чтобы каждая вкладка имела только связанный с ней код. Большой !! Подождите, мы не знаем, какая вкладка появится первой, где находится код инициализации приложения и в каком пакете? И как я могу загрузить их по отдельности, если я хочу использовать их по отдельности?
В экосистеме Vue все, что находится внутри экземпляра Vue (app.js), является компонентом Vue (App.vue). App.js содержит создание экземпляра vue и добавление его к корню тела в HTML, как показано на изображении ниже.
Но у него гораздо больше функций, таких как хранилище, и некоторые предварительные условия, такие как авторизация и получение кэшированных данных, если таковые имеются.
Для каждого отдельного SPA мы объединяем (используя веб-пакет) наш код таким образом, чтобы он ожидал и внедрял функцию или данные в App.vue, что является общим для каждой вкладки. Для этого необходимо изменить конфигурацию нашего веб-пакета, чтобы это произошло как шарм, то есть экспортировать только App.vue для каждой вкладки, а не пакет с app.js
Мы можем развернуть наш SPA как отдельные приложения и использовать их совместно, если они используются в единственном родительском приложении, вводящем авторизацию и другие вещи, общие для всех. Каждый отдельный App.vue имеет своего собственного поставщика и может быть вызван во время выполнения с внедрением зависимостей в рамках механизма разделения кода.
Вот и все, пока я опубликую код с одним сценарием во второй части.
