Vabanege Vue Prop puurimisest pakkumise/süstiga

Vue pakub mitmeid viise andmevoo ja komponentidevahelise suhtluse haldamiseks. Levinud väljakutse Vue arendajana on rekvisiitide puurimine, mille käigus edastate andmeid erinevate komponentide kihtide kaudu, mis viib keeruka ja vähem hooldatava koodibaasini.

Vue pakub varustamise/sissepritse mehhanismi, puhast lahendust tugipuurimiseks. Pakkumine/süstimine aitab hallata andmesidet vanemate ja sügavalt pesastatud alamkomponentide vahel.

Prop puurimisprobleemi mõistmine

Enne pakkumise/süstimise lahendusse süvenemist on oluline probleemist aru saada. Prop puurimine toimub siis, kui peate edastama andmed tipptasemel ülemkomponendist sügavalt pesastatud alamkomponendile.

Selle hierarhia vahekomponendid peavad andmeid vastu võtma ja edastama, isegi kui nad neid ise ei kasuta. Andmete edastamiseks ülemkomponendist alamkomponendile peate seda tegema edastage need andmed rekvisiidina oma Vue komponentidele.

Vaatleme näitena järgmist komponentide hierarhiat:

• Rakendus
  • ParentComponent
    • ChildComponent
      • GrandChildComponent

Oletame, et andmed saidilt Rakendus komponent peab jõudma GrandChildComponent. Sel juhul peate selle rekvisiitide abil läbima kahe vahekomponendi, isegi kui need komponendid ei vaja korrektseks toimimiseks andmeid. See võib põhjustada ülespuhutud koodi, mida on raskem siluda.

Mis on andmine/süstimine?

Vue lahendab selle probleemi rakendusega anda/süstida funktsioon, mis võimaldab ülemkomponendil anda andmeid või funktsioone oma järeltulijatele, olenemata sellest, kui sügavalt need on pesastatud. See lahendus lihtsustab andmete jagamist ja parandab koodi organiseerimist.

Pakkuja komponent

Pakkuja komponent kavatseb jagada andmeid või meetodeid oma järglastega. See kasutab pakkuda võimalus teha need andmed oma lastele kättesaadavaks. Siin on näide pakkuja komponendist:

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

See koodiplokk näitab pakkuja komponenti, Rakendus, mis pakub a tervitus muutuv kõigi selle järglaste komponentide suhtes. Muutuja esitamiseks peate määrama võtme. Võtmele muutujaga sama nime määramine aitab hoida koodi hooldatavana.

Järeltulivad komponendid

Järglased komponendid on pesastatud struktuuri komponendid. Nad saavad sisestada ja kasutada esitatud andmeid oma komponendi eksemplaris. Seda tehakse järgmiselt.

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

Järglane komponent sisestab esitatud andmed ja pääseb neile juurde oma mallis lokaalselt määratletud muutujana.

Nüüd kaaluge allolevat pilti:

Sellel pildil näete nelja komponendi hierarhiat, alustades juurkomponendist, mis toimib lähtepunktina. Teised komponendid pesitsevad hierarhias, lõppedes Lapselaps komponent.

Komponent GrandChild võtab vastu andmed, mida rakenduse komponent pakub. Kui see mehhanism on paigas, saate vältida andmete edastamist Lapsevanem ja Laps komponendid, kuna need komponendid ei vaja korrektseks toimimiseks andmeid.

Andmete esitamine rakenduse (ülemaailmsel) tasemel

Saate esitada andmeid rakenduse tasemel Vue pakkumise/süstimise abil. See on tavaline kasutusjuht andmete ja konfiguratsiooni jagamiseks teie Vue rakenduse erinevate komponentide vahel.

Siin on näide selle kohta, kuidas saate rakenduse tasemel andmeid esitada.

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

Oletame, et teil on rakendus, mis nõuab globaalset konfiguratsiooniobjekti, mis sisaldab Rakenduse programmeerimisliides (API) lõpp-punktid, kasutaja autentimise teave ja muud sätted.

Seda saate saavutada, esitades konfiguratsiooniandmed ülataseme komponendis, tavaliselt teie main.js faili, mis võimaldab teistel komponentidel seda süstida ja kasutada:

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

Ülaltoodud komponent kasutab süstida funktsioon juurdepääsuks globalConfig objekt, mida rakendus globaalsel tasandil pakub. Kõikidele atribuutidele või sätetele pääsete juurde globalConfigis, interpoleerides või sidudes need atribuudid erinevad andmete sidumise tehnikad Vue's komponendi sees.

Pakkumise ja süstimise eelised ja kasutusalad

Siin on mõned pakkumise/süsti funktsiooni eelised ja olulised kasutusvõimalused Vue veebirakenduste loomisel.

Puhtam ja suurema jõudlusega optimeeritud kood

Kasutades anda/süstida, eemaldate vajaduse vahekomponentide järele andmete edastamiseks, mida nad ei kasuta. Selle tulemuseks on puhtam ja paremini hooldatav kood, vähendades tarbetuid rekvisiidideklaratsioone.

Samuti tagab Vue reaktiivsussüsteem, et komponendid renderdatakse uuesti ainult siis, kui nende sõltuvused muutuvad. Pakkumine/süstimine võimaldab andmeid tõhusalt jagada, mis võib viia jõudluse optimeerimiseni, vähendades tarbetuid kordusrenderdusi.

Täiustatud komponentide kapseldamine

Pakkumine/süstimine soodustab komponentide paremat kapseldamist. Alamkomponendid peavad muretsema ainult nende andmete pärast, mida nad selgesõnaliselt kasutavad, vähendades nende sõltuvust emakomponentide spetsiifilisest andmestruktuurist.

Kaaluge kuupäevavalija komponenti, mis tugineb lokaliseeritud kuupäevavormingu sätetele. Selle asemel, et neid sätteid rekvisiididena edastada, saate need sisestada põhikomponendis ja sisestada need ainult kuupäevavalija komponenti. See toob kaasa murede selgema lahususe.

Sõltuvussüst

Pakkumine/süstimine võib olla lihtne sõltuvuse süstimise vorm, muutes globaalsed teenused ja seaded sarnaseks API kliendid, lõpp-punktid, kasutajaeelistused või andmesalved – hõlpsasti kättesaadavad igale neid vajavale komponendile. See tagab teie rakenduses ühtsed konfiguratsioonid.

Olulised punktid, mida tuleb pakkumise ja süstimise kasutamisel arvestada

Samal ajal kui anda/süstida mehhanism pakub palju eeliseid, peaksite seda kasutama ettevaatlikult, et vältida soovimatuid kõrvaltoimeid.

• Kasutage anda/süstida oluliste andmete või vajalike funktsioonide jagamiseks komponendihierarhias, näiteks konfiguratsiooni- või API-võtmed. Selle liigne kasutamine võib muuta teie komponentide suhted liiga keeruliseks.
• Dokumenteerige, mida pakkuja komponent pakub ja milliseid järeltulijaid komponente tuleks sisestada. See aitab teie komponente mõista ja hooldada, eriti kui töötate meeskondades.
• Olge ettevaatlik sõltuvussilmuste loomisel, kus alamkomponent pakub midagi, mida ülemkomponent sisestab. See toob kaasa vigu ja ootamatu käitumise.

Kas Provide/Inject on Vue riigihalduse jaoks parim võimalus?

Andmevoo ja komponentide oleku haldamiseks on Vue veel üks kasulik funktsioon Provide/inject. Pakkumisel/süstimisel on omajagu miinuseid. Pakkumine/süstimine võib tekitada probleeme suuremahuliste rakenduste silumisel, testimisel ja hooldamisel.

Vue ametliku olekuhaldusraamistiku Pinia kasutamine oleks parim Vue rakenduse keeruliste olekute käsitlemiseks. Pinia pakub tsentraliseeritud poodi ja tüübikindlat lähenemist riigihaldusele, muutes Vue rakenduste arendamise kättesaadavamaks.