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

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

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

Съдържание

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

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

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

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

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

Как да стилизирате и преоразмерите джаджата за часовник на началния си екран

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

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

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

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

 
<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. С този механизъм можете да избегнете предаването на данни през компонентите родител и дете, тъй като тези компоненти не се нуждаят от данните, за да функционират правилно.

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

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

Tiny Deduplicator търси дублиращи се файлове въз основа на хеш стойност

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

 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), информация за удостоверяване на потребителя и други настройки.

Можете да постигнете това, като предоставите конфигурационните данни на компонента от най-високо ниво, обикновено във вашия 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>

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

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

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

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

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

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

Списък с кодове за играчки Roblox: Осребрете сега

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

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

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

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

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

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

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

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

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

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

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