Звільніться від буріння Vue Prop за допомогою Provide/Inject

Автор

Vue пропонує кілька способів керування потоком даних і зв’язком між компонентами. Звичайним завданням для розробників Vue є буріння реквізитів, коли ви передаєте дані через різні рівні компонентів, що призводить до створення складної та менш зручної для обслуговування бази коду.

Vue пропонує механізм забезпечення/закачування, чисте рішення для колонового буріння. Provide/inject допомагає керувати обміном даними між батьками та глибоко вкладеними дочірніми компонентами.

Розуміння проблеми опорного буріння

Перш ніж заглиблюватися в рішення надання/впровадження, важливо зрозуміти проблему. Проп-буріння відбувається, коли вам потрібно передати дані від батьківського компонента верхнього рівня до глибоко вкладеного дочірнього компонента.

Проміжні компоненти в цій ієрархії повинні отримувати та передавати дані, навіть якщо вони самі ними не користуються. Щоб передати дані від батьківського компонента до дочірнього компонента, вам потрібно буде передати ці дані як атрибути вашим компонентам Vue.

Розглянемо наведену нижче ієрархію компонентів як приклад:

Припустімо, що дані з компонента App повинні досягти GrandChildComponent. У такому випадку вам потрібно буде пропустити його через два проміжні компоненти за допомогою пропсів, навіть якщо цим компонентам не потрібні самі дані для правильного функціонування. Це може призвести до роздутого коду, який важче налагодити.

Що таке Provide/Inject?

Vue вирішує цю проблему за допомогою функції надання/введення, яка дозволяє батьківському компоненту надавати дані або функції своїм компонентам-нащадкам, незалежно від того, наскільки глибоко вони вкладені. Це рішення спрощує обмін даними та покращує організацію коду.

  Як видалити або встановити SIM-карту на iPhone

Компонент постачальника

Компонент постачальника має намір ділитися даними або методами зі своїми нащадками. Він використовує опцію надання, щоб зробити ці дані доступними для своїх дітей. Ось приклад компонента провайдера:

 
<template>
  <div>
    
    <ParentComponent/>
  </div>
</template>
<script setup>
import { provide } from 'vue';
import ParentComponent from './components/ParentComponent.vue';
const greeting = 'Hello from Provider';
provide('greeting', greeting);
</script>

Цей блок коду показує компонент провайдера, App, який надає змінну привітання всім своїм компонентам-нащадкам. Щоб надати змінну, потрібно встановити ключ. Встановлення ключа на те саме ім’я, що й змінна, допоможе підтримувати ваш код.

Компоненти-нащадки

Компоненти-нащадки — це компоненти вкладеної структури. Вони можуть вводити та використовувати надані дані у своєму компоненті. Ось як це робиться:

 <script setup>
import { inject } from 'vue';
const injectedData = inject('greeting');
</script>

Компонент-нащадок вводить надані дані та може отримати доступ до них у своєму шаблоні як до локально визначеної змінної.

Тепер розгляньте зображення нижче:

На цьому зображенні ви можете побачити ієрархію з чотирьох компонентів, починаючи з кореневого компонента, який служить початковою точкою. Інші компоненти вкладаються в ієрархію, закінчуючись компонентом GrandChild.

Компонент GrandChild отримує дані, які надає компонент App. За допомогою цього механізму ви можете уникнути передачі даних через батьківський і дочірній компоненти, оскільки ці компоненти не потребують даних для належного функціонування.

Надання даних на рівні програми (глобальному).

Ви можете надавати дані на рівні програми за допомогою provide/inject Vue. Це звичайний випадок використання для обміну даними та конфігурацією між різними компонентами вашої програми Vue.

Ось приклад того, як ви можете надати дані на рівні програми:

 
import { createApp } from 'vue'
import App from './App.vue'
const globalConfig = {
  apiUrl: 'https://example.com/api',
  authKey: 'my-secret-key',
  
};
app.provide('globalConfig', globalConfig);
createApp(App).mount('#app')

Припустімо, що у вас є програма, якій потрібен об’єкт глобальної конфігурації, що містить кінцеві точки інтерфейсу прикладного програмування (API), інформацію про автентифікацію користувача та інші налаштування.

  Введення в нейронні мережі [+ 5 Learning Resources]

Ви можете досягти цього, надавши дані конфігурації на компоненті верхнього рівня, як правило, у вашому файлі main.js, дозволяючи іншим компонентам вводити та використовувати їх:

 <template>
  <div>
    <h1>API Settings</h1>
    <p>API URL: {{ globalConfig.apiUrl }}</p>
    <p>Authentication Key: {{ globalConfig.authKey }}</p>
  </div>
</template>
<script setup>
import { inject } from 'vue';
const globalConfig = inject('globalConfig');
</script>

Наведений вище компонент використовує функцію inject для доступу до об’єкта globalConfig, який програма надає на глобальному рівні. Ви можете отримати доступ до будь-яких властивостей або налаштувань із globalConfig, інтерполюючи або зв’язуючи ці властивості з різними техніками зв’язування даних у Vue у межах компонента.

Переваги та застосування Provide and Inject

Ось деякі переваги та важливі способи використання функції надання/введення під час створення веб-додатків у Vue.

Більш чистий і оптимізований для продуктивності код

Використовуючи provide/inject, ви позбавляєтеся від необхідності проміжних компонентів передавати дані, які вони не використовують. Це призводить до більш чистого та більш зручного обслуговування коду за рахунок зменшення непотрібних декларацій властивостей.

Крім того, система реактивності Vue гарантує, що компоненти повторно рендеряться лише тоді, коли їхні залежності змінюються. Provide/inject дозволяє ефективно обмінюватися даними, що може призвести до оптимізації продуктивності за рахунок зменшення непотрібних повторних візуалізацій.

Покращена інкапсуляція компонентів

Provide/inject сприяє кращій інкапсуляції компонентів. Дочірнім компонентам потрібно турбуватися лише про дані, які вони явно використовують, зменшуючи свою залежність від конкретної структури даних батьківських компонентів.

  Коли я створив обліковий запис Google?

Розглянемо компонент вибору дати, який покладається на налаштування локалізованого формату дати. Замість того, щоб передавати ці параметри як атрибути, ви можете надати їх у батьківському компоненті та вставити лише в компонент вибору дати. Це призводить до більш чіткого розподілу проблем.

Ін’єкція залежності

Provide/inject може служити простою формою ін’єкції залежностей, роблячи глобальні служби та налаштування, як-от клієнти API, кінцеві точки, налаштування користувача чи сховища даних, доступними для будь-якого компонента, який їх потребує. Це забезпечує послідовність конфігурацій у вашій програмі.

Основні моменти, які слід враховувати під час використання Provide and Inject

Хоча механізм надання/введення має багато переваг, ви повинні використовувати його обережно, щоб уникнути небажаних побічних ефектів.

  • Використовуйте provide/inject для обміну важливими даними або функціями, необхідними в ієрархії компонентів, як-от конфігурація або ключі API. Надмірне його використання може зробити зв’язки компонентів занадто складними.
  • Задокументуйте, що надає компонент-провайдер і які компоненти-нащадки повинні вставляти. Це допомагає зрозуміти та підтримувати ваші компоненти, особливо під час командної роботи.
  • Будьте обережні щодо створення циклів залежностей, де дочірній компонент надає те, що впроваджує батьківський компонент. Це призведе до помилок і несподіваної поведінки.

Чи є Provide/Inject найкращим варіантом для управління станом у Vue?

Provide/inject — ще одна корисна функція у Vue для керування потоком даних і станом компонентів. Provide/inject має свої мінуси. Надання/введення може призвести до проблем у налагодженні, тестуванні та підтримці великомасштабних програм.

Використання Pinia, офіційної системи керування станом Vue, було б найкращим для обробки складних станів у вашій програмі Vue. Pinia забезпечує централізоване зберігання та безпечний підхід до керування станом, що робить розробку додатків Vue більш доступною.