Osloboďte sa od Vue Prop Drilling with Provide/Inject

Vue ponúka niekoľko spôsobov riadenia dátového toku a komunikácie medzi komponentmi. Bežnou výzvou pre vývojárov Vue je vŕtanie podpier, pri ktorom odovzdávate údaje cez rôzne vrstvy komponentov, čo vedie ku komplexnej a menej udržiavateľnej kódovej základni.

Vue ponúka mechanizmus poskytovania/vstrekovania, čisté riešenie pre podperné vŕtanie. Poskytnúť/vložiť pomáha riadiť dátovú komunikáciu medzi rodičmi a hlboko vnorenými podriadenými komponentmi.

Pochopenie problému podperného vŕtania

Predtým, ako sa ponoríte do riešenia poskytnutia/vstreknutia, je dôležité porozumieť problému. K vŕtaniu rekvizít dochádza, keď potrebujete odovzdať údaje z nadradeného komponentu najvyššej úrovne do hlboko vnoreného podradeného komponentu.

Sprostredkujúce komponenty v tejto hierarchii musia prijímať a odovzdávať údaje, aj keď ich samy nepoužívajú. Ak chcete odovzdať údaje z nadradeného komponentu do podriadeného komponentu, budete musieť odovzdať tieto údaje ako rekvizity vašim komponentom Vue.

Zvážte nasledujúcu hierarchiu komponentov ako príklad:

• App
  • ParentComponent
    • ChildComponent
      • GrandChildComponent

Predpokladajme, že údaje z App komponent musí dosiahnuť GrandChildComponent. V takom prípade by ste ho museli preniesť cez dva prechodné komponenty pomocou rekvizít, aj keď tieto komponenty nepotrebujú samotné údaje, aby správne fungovali. To môže viesť k nafúknutému kódu, ktorý sa ťažšie ladí.

Čo je poskytovanie/injekcia?

Vue rieši tento problém pomocou poskytnúť/injektovať vlastnosť, ktorá umožňuje nadradenému komponentu poskytovať údaje alebo funkcie svojim potomkom, bez ohľadu na to, ako hlboko sú vnorené. Toto riešenie zjednodušuje zdieľanie údajov a zlepšuje organizáciu kódu.

Komponent poskytovateľa

Komponent poskytovateľa má v úmysle zdieľať údaje alebo metódy so svojimi potomkami. Používa sa poskytnúť možnosť sprístupniť tieto údaje svojim deťom. Tu je príklad komponentu poskytovateľa:

<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>

Tento blok kódu zobrazuje komponent poskytovateľa, App, ktorá poskytuje a pozdrav premenné na všetky jeho podradené komponenty. Ak chcete poskytnúť premennú, musíte nastaviť kľúč. Nastavenie kľúča na rovnaký názov ako premenná pomáha udržiavať váš kód udržiavateľný.

Potomkové komponenty

Zostupné komponenty sú komponenty vo vnorenej štruktúre. Môžu vložiť a použiť poskytnuté údaje vo svojej inštancii komponentu. Tu je postup:

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

Potomok vloží poskytnuté údaje a môže k nim pristupovať v rámci svojej šablóny ako lokálne definovanej premennej.

Teraz zvážte obrázok nižšie:

Na tomto obrázku môžete vidieť hierarchiu štyroch komponentov, počnúc koreňovým komponentom, ktorý slúži ako východiskový bod. Ostatné komponenty sú vnorené do hierarchie a končia v GrandChild komponent.

Komponent GrandChild prijíma údaje, ktoré poskytuje komponent App. S týmto mechanizmom sa môžete vyhnúť prenosu údajov cez Rodič a Dieťa komponenty, pretože tieto komponenty nepotrebujú údaje, aby správne fungovali.

Poskytovanie údajov na (globálnej) úrovni aplikácie

Údaje môžete poskytnúť na úrovni aplikácie pomocou poskytnutia/vloženia Vue. Toto je bežný prípad použitia na zdieľanie údajov a konfigurácie medzi rôznymi komponentmi v rámci vašej aplikácie Vue.

Tu je príklad, ako môžete poskytnúť údaje na úrovni aplikácie:

// 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')

Predpokladajme, že máte aplikáciu, ktorá vyžaduje globálny konfiguračný objekt obsahujúci Aplikačné programové rozhranie (API) koncové body, informácie o autentifikácii používateľa a ďalšie nastavenia.

Môžete to dosiahnuť poskytnutím konfiguračných údajov na najvyššej úrovni komponentu, zvyčajne vo vašom main.js súbor, ktorý umožňuje iným komponentom ho vstreknúť a použiť:

<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>

Vyššie uvedený komponent využíva vstreknúť funkcia na prístup k globalConfig objekt, ktorý aplikácia poskytuje na globálnej úrovni. Môžete pristupovať k akýmkoľvek vlastnostiam alebo nastaveniam z globalConfig interpoláciou alebo väzbou týchto vlastností rôzne techniky viazania údajov vo Vue v rámci komponentu.

Výhody a použitie poskytovania a vstrekovania

Tu sú niektoré výhody a dôležité použitia funkcie poskytnúť/vložiť pri vytváraní webových aplikácií vo Vue.

Čistejší a výkonnejší optimalizovaný kód

Použitím poskytnúť/injektovaťodstránite potrebu prechodných komponentov na odovzdávanie údajov, ktoré nepoužívajú. Výsledkom je čistejší a udržiavateľnejší kód znížením nepotrebných deklarácií prop.

Systém reaktivity Vue tiež zaisťuje, že komponenty sa znova vykreslia iba vtedy, keď sa zmenia ich závislosti. Poskytovanie/vkladanie umožňuje efektívne zdieľanie údajov, čo môže viesť k optimalizácii výkonu znížením zbytočného opätovného vykresľovania.

Vylepšené zapuzdrenie komponentov

Poskytnutie/vstreknutie podporuje lepšie zapuzdrenie komponentov. Podradené komponenty sa musia starať iba o údaje, ktoré explicitne používajú, čím sa znižuje ich závislosť od špecifickej štruktúry údajov nadradených komponentov.

Zvážte komponent výberu dátumu, ktorý sa spolieha na lokalizované nastavenia formátu dátumu. Namiesto odovzdávania týchto nastavení ako rekvizít ich môžete poskytnúť v rámci nadradeného komponentu a vložiť ich iba do komponentu výberu dátumu. To vedie k jasnejšiemu oddeleniu obáv.

Injekcia závislosti

Poskytovanie/vkladanie môže slúžiť ako jednoduchá forma injekcie závislosti, ktorá vytvára globálne služby a nastavenia Klienti API, koncové body, užívateľské preferencie alebo dátové úložiská – ľahko dostupné pre každý komponent, ktorý ich potrebuje. To zaisťuje konzistentné konfigurácie vo vašej aplikácii.

Základné body, ktoré je potrebné zvážiť pri používaní aplikácie Provide a Inject

Kým poskytnúť/injektovať mechanizmus ponúka mnoho výhod, mali by ste ho používať opatrne, aby ste predišli nežiaducim vedľajším účinkom.

• Použite poskytnúť/injektovať na zdieľanie dôležitých údajov alebo funkcií potrebných v rámci hierarchie komponentov, ako je konfigurácia alebo kľúče API. Jeho nadmerné používanie môže spôsobiť, že vzťahy medzi komponentmi budú príliš zložité.
• Zdokumentujte, čo poskytuje komponent poskytovateľa a aké komponenty potomkov by mali vložiť. To pomáha pochopiť a udržiavať vaše komponenty, najmä pri práci v tímoch.
• Buďte opatrní pri vytváraní slučiek závislostí, kde podradený komponent poskytuje niečo, čo vkladá nadradený komponent. To povedie k chybám a neočakávanému správaniu.

Je Poskytnutie/Vloženie najlepšou voľbou pre riadenie štátu vo Vue?

Poskytovanie/vkladanie je ďalšou užitočnou funkciou vo Vue na správu toku údajov a stavu v komponentoch. Poskytovanie/injektovanie má svoj podiel na nevýhodách. Poskytovanie/injektovanie môže viesť k problémom pri ladení, testovaní a údržbe rozsiahlych aplikácií.

Pomocou Pinia, oficiálneho rámca riadenia štátu Vue, by bolo najlepšie zvládnuť zložité stavy vo vašej aplikácii Vue. Pinia poskytuje centralizovaný obchod a typovo bezpečný prístup k správe štátu, vďaka čomu je vývoj aplikácií Vue dostupnejší.