Vue3 provide-inject di

Vue3 прекрасный фреймворк, писать на котором одно удовольствие. Кто не пробовал — попробуйте, а кто юзает — наслаждайтесь. Сегодня хотелось бы написать о такой возможности, как передача данных в дочерние компоненты, с помощью provide-inject механизма. Конечно, всё познаётся в сравнении, поэтому затронем так же props.

И то, и другое — способ передачи данных вниз по дереву компонентов.

Передать данные из родителя в «потомок дочернего компонента» можно несколькими способами:
1. С помощью props.
Во входящий props дочернего компонента помещается объект, который мы хотим передать из родителя.

ParentComponent.vue  <template>   <child-component :data="someData" v-for="someData in allData" :key="someData.id"/> </template>

ChildComponent.vue  <script setup lang="ts">      interface DataTypes {...}      const props = defineProps<{     data: DataTypes   }>()  </script> <template>   <div>{{ props.data }}</div> </template>

Простой и понятный код — в ходе итерации по массиву данных в компоненте ParentComponent.vue мы создаём однотипные элементы шаблона html (<child-component>) и передаём в каждый шаблон свой элемент для отрисовки. Соответственно в каждом child-component мы этот элемент принимаем как props и отрисовываем в html.

Но что, если у ChildComponent есть свой потомок?

ChildComponent.vue  <script setup lang="ts">      interface DataTypes {...}      const props = defineProps<{     data: DataTypes   }>()  </script> <template>   <div>{{ props.data }}</div>   <child-of-child-component :item="props.data"> </template>

В 14 строке я добавил дочерний компонент для нашего ChildComponent.vue и передал ему в качестве props объект, так же полученный пропсом из ParentComponent.vue.
Получилась своеобразная лесенка из данных.

Данная архитектура вполне приемлема и не должна вызвать проблем ни в поддержке, ни в читабельности.

Но… что, если ступеней будет больше? Насколько понятным станет код? А безопасность? Допустим, мы захотим изменить компонент, который в середине лестницы. Тогда все дочерние компоненты могут просто сломаться. Нам придётся учитывать при перепроектировании компонента эти условия, что само по себе уже есть ограничение и нарушение принципа одной ответственности — наш компонент не просто инкапсулирует какую то логику внутри себя, как в коробочке, но еще и передаёт данные в следующий компонент, не являясь исходным «отправителем» этой информации.

Допустим, в конечном компоненте нам нужно каким то образом повлиять на props ? Мы сделаем emit события вверх по цепочке компонента, перехватим это событие в родителе.. и повторим этот способ столько раз, сколько ступеней в нашей лестнице.

Развивать тему emit я не буду, но для полноты картины я посчитал нужным сделать эти пометки.

Итак, проблемы такой архитектуры.

• Нарушение принципа одной ответственности. Я считаю это главным минусом. При перепроектировании или изменении компонента мы вынуждены учитывать дополнительные факторы, могущие повлиять на другие компоненты

• Читабельность, безопасность и очевидность данных. Чтобы отследить источник данных, придётся несколько раз перемещаться по компонентам, параллельно отслеживая возможные emit на изменение этих данных.

Давайте рассмотрим частичную альтернативу этому:

2. С помощью provide-inject

Этот метод позволяет передать данные из родителя в любого по цепочке потомка, минуя промежуточные компоненты.

Передаём данные из родителя:

ParentComponent.vue  <script setup lang="ts">   provide(key,someData) </script>

И принимаем в том потомке, где они необходимы, минуя промежуточные:

ChildOfChildComponent.vue  <script setup lang="ts">   const item = inject(key) </script>

Не отходя далеко от кассы, поясню некоторые моменты, затем приведу код в приличный вид, дабы продолжить.

key — идентификатор передаваемых данных. В документации рекомендуется использовать для обозначения ключей тип Symbol. И я с этим полностью согласен — этот тип данных генерирует полностью уникальное значение, соответственно проблем со случайным «совпадением» ключей не будет.

От себя добавлю — называйте ключи так, чтобы было сразу понятно откуда приходят данные! Так намного читабельнее и очевиднее!

Давайте же вынесем ключ в файл injectKey.js

 injectKey.js  export const DATA_FROM_ParentComponent_VUE = Symbol()

Соответственно перепишем наш provide-inject:

ParentComponent.vue  <script setup lang="ts">   provide(DATA_FROM_ParentComponent_VUE, data) </script>

ChildOfChildComponent.vue  <script setup lang="ts">   const item = inject(DATA_FROM_ParentComponent_VUE) </script>

Отлично, теперь данные можно отобразить в шаблоне!

Но, что если мы захотим изменить полученные путём инжектирования данные? Как нам быть? Неужели опять строить лесенку из emit ?

Спешу вас обрадовать — есть гораздо более интересный способ это сделать! Секрет в том, что можно запровайдить реактивную переменную!

Так как данные, полученные путём inject не являются по факту пропсами, мы можем их менять прямо в том компоненте, где мы их получили. Дополню наш код:

ParentComponent.vue  <script setup lang="ts">   const data: Ref<number> = ref(2)   provide(DATA_FROM_ParentComponent_VUE, data) </script>

ChildOfChildComponent.vue  <script setup lang="ts">   const data: Ref<number>|undefined = inject(DATA_FROM_ParentComponent_VUE)   function doubleData(){     if(data){       data.value *= 2     }   } </script> <template>     <div @click="doubleItem">{{ data }}</div> </template>

При таком использовании в родительском компоненте по названию ключа можно понять, куда именно передаются данные и где они, возможно, меняются.

Но что, если мы хотим ЯВНО в родителе указать функцию, которая должна выполняться с переданными данными? Хорошо, в этом случае можно в родителе объявить дополнительный provide !

ParentComponent.vue  <script setup lang="ts">   const data: Ref<number> = ref(2)   provide(DATA_FROM_ParentComponent_VUE, data)   provide(CHANGE_DATA_FROM_ParentComponent_VUE, () => {     data.value *= 2 }) </script>

В этом случае, в ЛЮБОМ дочернем компоненте, можно заинжектить функцию:

ChildOfChildComponent.vue / ChildComponent.vue  <script setup lang="ts">   const double: (() => number)|undefined = inject(CHANGE_DATA_FROM_ParentComponent_VUE) </script> <template>     <div @click="double">...</div> </template>

Никаких emit, прямое изменение значения переменной прямо в дочернем компоненте

Подытожу: provide-inject является достаточно продуманным и хорошим вариантом обработки и передачи информации по дереву дочерних компонентов, при условии, когда альтернативные варианты невозможны, либо крайне затруднительны. Однако я бы не советовал увлекаться этим механизмом, и заменять им все подрят пропсы или эмиты. Этот механизм хорош в единичных случаях, когда НЕТ АЛЬТЕРНАТИВЫ. Просто представьте файл с ключами длинной в страницу, и вы поймёте о чем я.

Думаю, это всё что я хотел рассказать о provide-inject. Спасибо за внимание.