Atbrīvojieties no Vue Prop urbšanas, izmantojot Provide/Inject

Vue piedāvā vairākus veidus, kā pārvaldīt datu plūsmu un saziņu starp komponentiem. Izplatīts izaicinājums kā Vue izstrādātājam ir urbšana, kurā dati tiek nodoti caur dažādiem komponentu slāņiem, tādējādi veidojot sarežģītu un mazāk uzturējamu kodu bāzi.

Vue piedāvā nodrošināšanas/injekcijas mehānismu — tīru risinājumu atbalsta urbšanai. Nodrošināt/injektēt palīdz pārvaldīt datu saziņu starp vecākiem un dziļi ligzdotiem bērnu komponentiem.

Izpratne par balsta urbšanas problēmu

Pirms iedziļināties risinājumā, kas sniedz/injicē, ir svarīgi saprast problēmu. Atbalsta urbšana notiek, ja jums ir jāpārsūta dati no augstākā līmeņa vecākkomponenta uz dziļi ligzdotu pakārtoto komponentu.

Šīs hierarhijas starpkomponentiem ir jāsaņem un jānodod dati, pat ja viņi paši tos neizmanto. Lai pārsūtītu datus no vecākkomponenta uz pakārtoto komponentu, jums tas būs jādara nododiet šos datus kā rekvizītus saviem Vue komponentiem.

Apsveriet šādu komponentu hierarhiju kā piemēru:

• App
  • ParentComponent
    • ChildComponent
      • GrandChildComponent

Pieņemsim, ka dati no App komponentam ir jāsasniedz GrandChildComponent. Tādā gadījumā jums tas ir jāizlaiž cauri diviem starpkomponentiem, izmantojot rekvizītus, pat ja šiem komponentiem pašiem nav nepieciešami dati, lai tie darbotos pareizi. Tas var novest pie uzpūsta koda, kuru ir grūtāk atkļūdot.

Kas ir nodrošināt/injicēt?

Vue risina šo problēmu ar nodrošināt/injicēt funkcija, kas ļauj vecākajam komponentam nodrošināt datus vai funkcijas saviem pēcnācējiem neatkarīgi no tā, cik dziļi tie ir ligzdoti. Šis risinājums vienkāršo datu koplietošanu un uzlabo koda organizēšanu.

Nodrošinātāja komponents

Pakalpojumu sniedzēja komponents plāno koplietot datus vai metodes ar saviem pēcnācējiem. Tas izmanto nodrošināt iespēja darīt šos datus pieejamus saviem bērniem. Šis ir nodrošinātāja komponenta piemērs:

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

Šis koda bloks parāda nodrošinātāja komponentu, App, kas nodrošina a sveiciens mainīgs visiem tā pēcnācējiem komponentiem. Lai nodrošinātu mainīgo, jums jāiestata atslēga. Atslēgai iestatot tādu pašu nosaukumu kā mainīgajam, tiek nodrošināta koda apkope.

Pēcnācēju sastāvdaļas

Pēcnācēji komponenti ir ligzdotas struktūras sastāvdaļas. Viņi var ievadīt un izmantot sniegtos datus savā komponenta instancē. Lūk, kā tas tiek darīts:

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

Pēcnācēja komponents ievada sniegtos datus un var piekļūt tiem savā veidnē kā lokāli definētam mainīgajam.

Tagad apsveriet tālāk redzamo attēlu:

Šajā attēlā var redzēt četru komponentu hierarhiju, sākot ar saknes komponentu, kas kalpo kā sākumpunkts. Pārējie komponenti atrodas hierarhijā, kas beidzas ar Mazbērns komponents.

Komponents GrandChild saņem datus, ko nodrošina App komponents. Izmantojot šo mehānismu, jūs varat izvairīties no datu nosūtīšanas caur Vecāks un Bērns komponentiem, jo ​​šiem komponentiem nav nepieciešami dati, lai tie darbotos pareizi.

Datu nodrošināšana lietotnes (globālā) līmenī

Varat sniegt datus lietotnes līmenī, izmantojot Vue nodrošināt/inject. Šis ir izplatīts datu un konfigurācijas kopīgošanas gadījums starp dažādiem komponentiem jūsu Vue lietojumprogrammā.

Tālāk ir sniegts piemērs tam, kā varat nodrošināt datus lietotnes līmenī.

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

Pieņemsim, ka jums ir lietojumprogramma, kurai nepieciešams globāls konfigurācijas objekts, kas satur Lietojumprogrammu saskarne (API) galapunktus, lietotāja autentifikācijas informāciju un citus iestatījumus.

To var panākt, sniedzot konfigurācijas datus augstākā līmeņa komponentā, parasti savā galvenais.js failu, ļaujot citiem komponentiem to ievadīt un izmantot:

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

Iepriekš minētais komponents izmanto injicēt funkcija, lai piekļūtu globālā konfigurācija objektu, ko lietotne nodrošina globālā līmenī. Varat piekļūt jebkuriem rekvizītiem vai iestatījumiem no globalConfig, interpolējot vai saistot šos rekvizītus ar dažādas datu saistīšanas metodes Vue komponenta ietvaros.

Nodrošināšanas un injekcijas priekšrocības un izmantošana

Šeit ir dažas priekšrocības un svarīgi izmantošanas veidi nodrošināt/inject funkcijai, veidojot tīmekļa lietojumprogrammas Vue.

Tīrāks un efektīvāks optimizēts kods

Izmantojot nodrošināt/injicēt, jūs novēršat nepieciešamību pēc starpkomponentiem nodot datus, ko tie neizmanto. Tādējādi tiek iegūts tīrāks un labāk uzturējams kods, samazinot nevajadzīgo atbalsta deklarāciju skaitu.

Turklāt Vue reaktivitātes sistēma nodrošina, ka komponenti tiek atkārtoti renderēti tikai tad, kad mainās to atkarības. Nodrošināšana/ievadīšana ļauj efektīvi koplietot datus, kas var novest pie veiktspējas optimizācijas, samazinot nevajadzīgu atkārtotu renderēšanu.

Uzlabota komponentu iekapsulēšana

Nodrošināšana/injicēšana veicina labāku komponentu iekapsulēšanu. Pakārtotajiem komponentiem ir jāuztraucas tikai par datiem, ko tie skaidri izmanto, samazinot to atkarību no vecāku komponentu specifiskās datu struktūras.

Apsveriet datuma atlasītāja komponentu, kas balstās uz lokalizētiem datuma formāta iestatījumiem. Tā vietā, lai šos iestatījumus nodotu kā palīgierīces, varat tos nodrošināt vecākkomponentā un ievadīt tikai datuma atlasītāja komponentā. Tas ļauj skaidrāk nodalīt bažas.

Atkarības injekcija

Nodrošināšana/ievadīšana var kalpot kā vienkāršs atkarības ievadīšanas veids, padarot globālus pakalpojumus un iestatījumus līdzīgus API klienti, galapunkti, lietotāju preferences vai datu krātuves — viegli pieejami jebkuram komponentam, kuram tie ir nepieciešami. Tas nodrošina konsekventas konfigurācijas visā jūsu lietotnē.

Svarīgākie punkti, kas jāņem vērā, lietojot nodrošināt un injicēt

Kamēr nodrošināt/injicēt mehānismam ir daudz priekšrocību, tas jālieto uzmanīgi, lai izvairītos no nevēlamām blakusparādībām.

• Izmantot nodrošināt/injicēt lai kopīgotu svarīgus datus vai funkcijas, kas nepieciešamas komponentu hierarhijā, piemēram, konfigurācijas vai API atslēgās. Pārmērīga tā izmantošana var padarīt jūsu komponentu attiecības pārāk sarežģītas.
• Dokumentējiet, ko sniedz pakalpojumu sniedzēja komponents un kādi pēcnācēju komponenti ir jāievada. Tas palīdz izprast un uzturēt jūsu komponentus, īpaši strādājot komandās.
• Esiet piesardzīgs, veidojot atkarības cilpas, kur pakārtotais komponents nodrošina kaut ko tādu, ko ievada vecākkomponents. Tas radīs kļūdas un neparedzētu rīcību.

Vai Provide/Inject ir labākā valsts pārvaldības iespēja Vue?

Nodrošināt/inject ir vēl viena noderīga funkcija Vue, lai pārvaldītu datu plūsmu un stāvokli visos komponentos. Nodrošināšana/injicēšana ir saistīta ar savu daļu negatīvo pusi. Nodrošināšana/ievadīšana var radīt problēmas liela mēroga lietojumprogrammu atkļūdošanā, testēšanā un uzturēšanā.

Izmantojot Pinia, Vue oficiālo stāvokļa pārvaldības sistēmu, vislabāk būtu apstrādāt sarežģītus stāvokļus savā Vue lietojumprogrammā. Pinia nodrošina centralizētu veikalu un tipam drošu pieeju valsts pārvaldībai, padarot Vue lietotņu izstrādi pieejamāku.