Eliberați-vă de forajul Vue Prop cu Furnizare/Injectare

Vue oferă mai multe moduri de a gestiona fluxul de date și comunicarea între componente. O provocare obișnuită în calitate de dezvoltator Vue este drillingul cu prop, în care transmiteți date prin diferite straturi de componente, ceea ce duce la o bază de cod complexă și mai puțin întreținută.

Vue oferă mecanismul de furnizare/injectare, o soluție curată pentru forarea prop. Furnizarea/injectarea ajută la gestionarea comunicării de date între părinți și componentele copil profund imbricate.

Înțelegerea problemei de foraj cu prop

Înainte de a explora soluția de furnizare/injectare, este important să înțelegeți problema. Forarea de elemente are loc atunci când trebuie să transferați date de la o componentă părinte de nivel superior la o componentă secundară profund imbricată.

Componentele intermediare din această ierarhie trebuie să primească și să transmită datele, chiar dacă nu le folosesc ei înșiși. Pentru a transmite date de la o componentă părinte la o componentă secundară, va trebui

transmiteți aceste date ca elemente de recuzită componentelor dumneavoastră Vue.

Luați în considerare următoarea ierarhie a componentelor ca exemplu:

• App
  • ParentComponent
    • ChildComponent
      • GrandChildComponent

Să presupunem că date de la App componenta trebuie să ajungă la GrandChildComponent. În acest caz, ar trebui să îl treceți prin cele două componente intermediare folosind elemente de recuzită, chiar dacă acele componente nu au nevoie de datele în sine pentru a funcționa corect. Acest lucru poate duce la un cod umflat, care este mai greu de depanat.

Ce este furnizarea/injectarea?

Vue abordează această problemă cu furniza/injectează caracteristică, care permite unei componente părinte să furnizeze date sau funcții componentelor sale descendente, indiferent cât de adânc sunt imbricate. Această soluție simplifică partajarea datelor și îmbunătățește organizarea codului.

Componenta furnizorului

O componentă de furnizor intenționează să partajeze date sau metode cu descendenții săi. Acesta folosește oferi opțiunea de a pune aceste date la dispoziția copiilor săi. Iată un exemplu de componentă de furnizor:

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

Acest bloc de cod arată o componentă de furnizor, App, care oferă a Salut variabilă la toate componentele sale descendente. Pentru a furniza o variabilă, trebuie să setați o cheie. Setarea cheii la același nume ca și variabila vă ajută să vă păstrați codul.

Componente descendente

Componentele descendente sunt componente dintr-o structură imbricată. Ei pot injecta și utiliza datele furnizate în instanța lor componente. Iată cum se face:

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

Componenta descendentă injectează datele furnizate și le poate accesa în șablonul său ca variabilă definită local.

Acum, luați în considerare imaginea de mai jos:

În această imagine, puteți vedea o ierarhie de patru componente, începând cu o componentă rădăcină care servește ca punct de plecare. Celelalte componente se cuibăresc în ierarhie, se termină în Nepotul componentă.

Componenta GrandChild primește datele pe care le furnizează componenta App. Cu acest mecanism în vigoare, puteți evita trecerea datelor prin Mamă și Copil componente, deoarece acele componente nu au nevoie de date pentru a funcționa corect.

Furnizarea de date la nivel de aplicație (global).

Puteți furniza date la nivel de aplicație cu furnizarea/injectarea lui Vue. Acesta este un caz de utilizare obișnuit pentru partajarea datelor și a configurației între diferite componente din aplicația dvs. Vue.

Iată un exemplu despre cum puteți furniza date la nivel de aplicație:

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

Să presupunem că aveți o aplicație care necesită un obiect de configurare globală care conține Interfață de programare a aplicațiilor (API) puncte finale, informații de autentificare a utilizatorului și alte setări.

Puteți realiza acest lucru furnizând datele de configurare la componenta de nivel superior, de obicei în dvs main.js fișier, permițând altor componente să-l injecteze și să-l folosească:

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

Componenta de mai sus folosește injecta funcția pentru a accesa globalConfig obiect, pe care aplicația îl oferă la nivel global. Puteți accesa orice proprietăți sau setări din globalConfig interpolând sau legând aceste proprietăți cu diferite tehnici de legare a datelor în Vue în cadrul componentei.

Beneficii și utilizări ale furnizării și injectării

Iată câteva beneficii și utilizări importante pentru caracteristica de furnizare/injectare atunci când creați aplicații web în Vue.

Cod mai curat și cu performanță optimizată

Folosind furniza/injectează, eliminați necesitatea ca componentele intermediare să transmită datele pe care nu le folosesc. Acest lucru are ca rezultat un cod mai curat și mai ușor de întreținut prin reducerea declarațiilor de prop inutile.

De asemenea, sistemul de reactivitate al lui Vue asigură că componentele sunt redate numai atunci când dependențele lor se schimbă. Furnizarea/injectarea permite partajarea eficientă a datelor, ceea ce poate duce la optimizări de performanță prin reducerea redărilor inutile.

Îmbunătățirea încapsulării componentelor

Furnizarea/injectarea promovează o mai bună încapsulare a componentelor. Componentele secundare trebuie să își facă griji doar cu privire la datele pe care le folosesc în mod explicit, reducându-și dependența de structura de date specifică a componentelor părinte.

Luați în considerare o componentă de selectare a datei care se bazează pe setările de format de dată localizate. În loc să treceți aceste setări ca elemente de recuzită, le puteți furniza în componenta părinte și le puteți injecta numai în componenta selector de date. Acest lucru duce la o separare mai clară a preocupărilor.

Injecția de dependență

Furnizarea/injectarea poate servi ca o formă simplă de injectare a dependenței, făcând servicii și setări globale, cum ar fi Clienți API, puncte finale, preferințe ale utilizatorilor sau depozite de date — ușor disponibile pentru orice componentă care are nevoie de ele. Acest lucru asigură configurații coerente în aplicația dvs.

Puncte esențiale de luat în considerare atunci când utilizați Furnizare și injectare

In timp ce furniza/injectează mecanismul oferă multe avantaje, ar trebui să îl utilizați cu atenție pentru a evita efectele secundare nedorite.

• Utilizare furniza/injectează pentru partajarea datelor sau funcțiilor importante necesare într-o ierarhie de componente, cum ar fi cheile de configurare sau API. Folosirea excesivă poate face relațiile tale componente prea complexe.
• Documentați ce oferă componenta furnizorului și ce componente descendente ar trebui să injecteze. Acest lucru vă ajută să înțelegeți și să vă mențineți componentele, mai ales atunci când lucrați în echipă.
• Fiți atenți la crearea buclelor de dependență, în care o componentă copil oferă ceva pe care o componentă părinte îl injectează. Acest lucru va duce la erori și un comportament neașteptat.

Este Furnizare/Injectare cea mai bună opțiune pentru managementul statului în Vue?

Furnizarea/injectarea este o altă caracteristică utilă în Vue pentru gestionarea fluxului de date și a stării în toate componentele. Furnizarea/injectarea vine cu partea sa de dezavantaje. Furnizarea/injectarea poate duce la provocări în depanarea, testarea și întreținerea aplicațiilor la scară largă.

Utilizarea Pinia, cadrul oficial de management al statelor Vue, ar fi cel mai bine pentru a gestiona stările complexe în aplicația ta Vue. Pinia oferă un magazin centralizat și o abordare sigură pentru tipul de gestionare a statului, făcând dezvoltarea aplicației Vue mai accesibilă.