Освободете се от Vue Prop пробиване с Provide/Inject

Vue предлага няколко начина за управление на потока от данни и комуникацията между компонентите. Често срещано предизвикателство като разработчик на Vue е пробивното пробиване, при което предавате данни през различни слоеве от компоненти, което води до сложна и по-малко поддържаема кодова база.

Vue предлага механизма за осигуряване/инжектиране, чисто решение за пробивно сондиране. Предоставяне/инжектиране помага за управление на комуникацията на данни между родители и дълбоко вложени дъщерни компоненти.

Разбиране на проблема с подпорното пробиване

Преди да се задълбочите в решението предоставяне/инжектиране, е важно да разберете проблема. Подпорно пробиване се случва, когато трябва да предадете данни от родителски компонент от най-високо ниво надолу към дълбоко вложен дъщерен компонент.

Междинните компоненти в тази йерархия трябва да получават и предават данните, дори и да не ги използват сами. За да предадете данни от родителски компонент към дъщерен компонент, ще трябва да

предавайте тези данни като подпори на вашите Vue компоненти.

Разгледайте следната йерархия на компонентите като пример:

• Приложение
  • ParentComponent
    • ChildComponent
      • GrandChildComponent

Да предположим, че данните от Приложение компонентът трябва да достигне GrandChildComponent. В такъв случай ще трябва да го прекарате през двата междинни компонента с помощта на подпори, дори ако тези компоненти не се нуждаят от самите данни, за да функционират правилно. Това може да доведе до раздут код, който е по-труден за отстраняване на грешки.

Какво е предоставяне/инжектиране?

Vue адресира този проблем с предоставяне/инжектиране функция, която позволява на родителския компонент да предоставя данни или функции на своите наследствени компоненти, без значение колко дълбоко са вложени. Това решение опростява споделянето на данни и подобрява организацията на кода.

Компонент на доставчика

Компонент на доставчик възнамерява да споделя данни или методи със своите наследници. Той използва предоставят опция да предостави тези данни на своите деца. Ето пример за компонент на доставчик:

<template>
<div>

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

Този кодов блок показва компонент на доставчика, Приложение, което осигурява a поздрав променлива към всички свои наследствени компоненти. За да предоставите променлива, трябва да зададете ключ. Задаването на ключа на същото име като променливата помага да запазите кода си поддържаем.

Потомствени компоненти

Потомствените компоненти са компоненти в рамките на вложена структура. Те могат да инжектират и използват предоставените данни в екземпляра на своя компонент. Ето как се прави:

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

Компонентът наследник инжектира предоставените данни и има достъп до тях в своя шаблон като локално дефинирана променлива.

Сега разгледайте изображението по-долу:

В това изображение можете да видите йерархия от четири компонента, започваща с основен компонент, който служи като начална точка. Другите компоненти са разположени в йерархията, завършваща в Внук компонент.

Компонентът GrandChild получава данните, които предоставя компонентът App. С този механизъм можете да избегнете предаването на данни през Родител и дете компоненти, тъй като тези компоненти не се нуждаят от данните, за да функционират правилно.

Предоставяне на данни на (глобално) ниво на приложение

Можете да предоставите данни на ниво приложение с предоставянето/инжектирането на Vue. Това е обичаен случай на използване за споделяне на данни и конфигурация между различни компоненти във вашето приложение Vue.

Ето пример за това как можете да предоставите данни на ниво приложение:

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

Да предположим, че имате приложение, което изисква глобален конфигурационен обект, съдържащ Интерфейс за програмиране на приложения (API) крайни точки, информация за удостоверяване на потребителя и други настройки.

Можете да постигнете това, като предоставите конфигурационните данни на компонент от най-високо ниво, обикновено във вашия main.js файл, позволяващ на други компоненти да го инжектират и използват:

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

Горният компонент използва инжектирайте функция за достъп до globalConfig обект, който приложението предоставя на глобално ниво. Можете да получите достъп до всякакви свойства или настройки от globalConfig чрез интерполиране или обвързване на тези свойства с различни техники за обвързване на данни във Vue в рамките на компонента.

Ползи и употреби на Provide and Inject

Ето някои предимства и важни употреби на функцията предоставяне/инжектиране при създаване на уеб приложения във Vue.

По-чист и оптимизиран за производителност код

Използвайки предоставяне/инжектиране, премахвате необходимостта междинните компоненти да предават данни, които не използват. Това води до по-чист и поддържаем код чрез намаляване на ненужните prop декларации.

Освен това системата за реактивност на Vue гарантира, че компонентите се рендират само когато техните зависимости се променят. Предоставянето/инжектирането позволява ефективно споделяне на данни, което може да доведе до оптимизиране на производителността чрез намаляване на ненужните повторни изобразявания.

Подобрено капсулиране на компоненти

Осигуряване/инжектиране насърчава по-добро капсулиране на компонентите. Дъщерните компоненти трябва да се тревожат само за данните, които изрично използват, намалявайки зависимостта си от специфичната структура на данните на родителските компоненти.

Помислете за компонент за избор на дата, който разчита на локализирани настройки за формат на дата. Вместо да предавате тези настройки като реквизити, можете да ги предоставите в родителския компонент и да ги инжектирате само в компонента за избор на дата. Това води до по-ясно разделяне на проблемите.

Инжектиране на зависимост

Осигуряване/инжектиране може да служи като проста форма на инжектиране на зависимости, правейки глобални услуги и настройки като API клиенти, крайни точки, потребителски предпочитания или хранилища на данни – лесно достъпни за всеки компонент, който се нуждае от тях. Това гарантира последователни конфигурации във вашето приложение.

Основни точки, които трябва да имате предвид при използване на Provide и Inject

Докато предоставяне/инжектиране Механизмът предлага много предимства, трябва да го използвате внимателно, за да избегнете нежелани странични ефекти.

• Използвайте предоставяне/инжектиране за споделяне на важни данни или функции, необходими в йерархия на компоненти, като конфигурация или API ключове. Прекаленото му използване може да направи вашите компонентни взаимоотношения твърде сложни.
• Документирайте какво предоставя компонентът на доставчика и какви компоненти-потомци трябва да инжектират. Това помага за разбирането и поддържането на вашите компоненти, особено когато работите в екипи.
• Бъдете внимателни при създаването на цикли на зависимост, където дъщерен компонент предоставя нещо, което родителският компонент инжектира. Това ще доведе до грешки и неочаквано поведение.

Дали Provide/Inject е най-добрият вариант за управление на състоянието във Vue?

Осигуряване/инжектиране е друга полезна функция във Vue за управление на потока от данни и състоянието на всички компоненти. Осигуряване/инжектиране идва със своя дял от недостатъци. Предоставянето/инжектирането може да доведе до предизвикателства при отстраняване на грешки, тестване и поддържане на широкомащабни приложения.

Използването на Pinia, официалната рамка за управление на състоянието на Vue, би било най-добре за справяне със сложни състояния във вашето приложение Vue. Pinia предоставя централизирано съхранение и безопасен за тип подход за управление на състоянието, което прави разработката на приложения на Vue по-достъпна.