Bryt dig fri från Vue Prop-borrning med Provide/Inject

Vue erbjuder flera sätt att hantera dataflöde och kommunikation mellan komponenter. En vanlig utmaning som Vue-utvecklare är rekvisitborrning, där du skickar ned data genom olika lager av komponenter, vilket leder till en komplex och mindre underhållbar kodbas.

Vue erbjuder tillhandahålla/injicera mekanismen, en ren lösning för propellborrning. Provide/inject hjälper till att hantera datakommunikation mellan föräldrar och djupt kapslade underordnade komponenter.

Förstå problemet med propellborrning

Innan du fördjupar dig i tillhandahålla/injicera lösningen är det viktigt att förstå problemet. Stödsborrning sker när du behöver skicka data från en överordnad komponent på toppnivå ner till en djupt kapslad underordnad komponent.

De mellanliggande komponenterna i denna hierarki behöver ta emot och vidarebefordra data, även om de inte använder dem själva. För att överföra data från en överordnad komponent till en underordnad komponent måste du

skicka dessa data som rekvisita till dina Vue-komponenter.

Betrakta följande komponenthierarki som ett exempel:

• App
  • ParentComponent
    • ChildComponent
      • GrandChildComponent

Antag att data från App komponenten måste nå GrandChildComponent. I så fall skulle du behöva skicka det genom de två mellanliggande komponenterna med hjälp av rekvisita, även om dessa komponenter inte behöver själva data för att fungera korrekt. Detta kan leda till uppsvälld kod som är svårare att felsöka.

Vad är tillhandahålla/injicera?

Vue tar upp detta problem med ge/injicera funktion, som gör att en överordnad komponent kan tillhandahålla data eller funktioner till dess underordnade komponenter, oavsett hur djupt kapslade de är. Denna lösning förenklar datadelning och förbättrar kodorganisationen.

Leverantörskomponent

En leverantörskomponent har för avsikt att dela data eller metoder med sina avkomlingar. Den använder förse möjlighet att göra denna information tillgänglig för sina barn. Här är ett exempel på en leverantörskomponent:

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

Detta kodblock visar en leverantörskomponent, App, som ger en hälsning variabel till alla dess underordnade komponenter. För att tillhandahålla en variabel måste du ställa in en nyckel. Att ställa in nyckeln till samma namn som variabeln hjälper till att hålla din kod underhållbar.

Descendant komponenter

Underordnade komponenter är komponenter inom en kapslad struktur. De kan injicera och använda den tillhandahållna informationen i sin komponentinstans. Så här går det till:

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

Den efterkommande komponenten injicerar den tillhandahållna data och kan komma åt den i sin mall som en lokalt definierad variabel.

Tänk nu på bilden nedan:

I den här bilden kan du se en hierarki av fyra komponenter, som börjar med en rotkomponent som fungerar som utgångspunkt. De andra komponenterna häckar i hierarkin och slutar på Barnbarn komponent.

GrandChild-komponenten tar emot den data som App-komponenten tillhandahåller. Med denna mekanism på plats kan du undvika att skicka data genom Förälder och Barn komponenter, eftersom dessa komponenter inte behöver data för att fungera korrekt.

Tillhandahålla data på en app (global) nivå

Du kan tillhandahålla data på appnivå med Vues tillhandahålla/injicera. Detta är ett vanligt användningsfall för att dela data och konfiguration mellan olika komponenter i din Vue-applikation.

Här är ett exempel på hur du kan tillhandahålla data på appnivå:

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

Anta att du har ett program som kräver ett globalt konfigurationsobjekt som innehåller Application Programming Interface (API) slutpunkter, användarautentiseringsinformation och andra inställningar.

Du kan uppnå detta genom att tillhandahålla konfigurationsdata på toppnivåkomponenten, vanligtvis i din main.js fil, som tillåter andra komponenter att injicera och använda den:

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

Ovanstående komponent använder injicera funktion för att komma åt globalConfig objekt, som appen tillhandahåller på global nivå. Du kan komma åt alla egenskaper eller inställningar från globalConfig genom att interpolera eller binda dessa egenskaper med olika databindningstekniker i Vue inom komponenten.

Fördelar och användningar av tillhandahålla och injicera

Här är några fördelar och viktiga användningsområden för tillhandahålla/injicera-funktionen när du skapar webbapplikationer i Vue.

Renare och mer prestandaoptimerad kod

Använder sig av ge/injiceratar du bort behovet av att mellanliggande komponenter skickar vidare data som de inte använder. Detta resulterar i renare och mer underhållbar kod genom att minska onödiga rekvisitadeklarationer.

Vues reaktivitetssystem säkerställer också att komponenter endast återrenderas när deras beroenden förändras. Ge/injicera gör att data kan delas effektivt, vilket kan leda till prestandaoptimeringar genom att minska onödiga återrenderingar.

Förbättrad komponentinkapsling

Ge/injicera främjar bättre komponentinkapsling. Underordnade komponenter behöver bara oroa sig för den data de uttryckligen använder, vilket minskar deras beroende av den specifika datastrukturen för överordnade komponenter.

Överväg en datumväljarkomponent som bygger på lokaliserade datumformatinställningar. Istället för att skicka dessa inställningar som rekvisita kan du tillhandahålla dem i den överordnade komponenten och injicera dem endast i datumväljarkomponenten. Detta leder till en tydligare separation av bekymmer.

Beroendeinjektion

Tillhandahålla/injicera kan fungera som en enkel form av beroendeinjektion, vilket gör globala tjänster och inställningar som API-klienter, slutpunkter, användarpreferenser eller datalager – lätt tillgängliga för alla komponenter som behöver dem. Detta säkerställer konsekventa konfigurationer i hela din app.

Viktiga punkter att tänka på när du använder Provide and Inject

Medan ge/injicera mekanism erbjuder många fördelar, du bör använda den försiktigt för att undvika oönskade biverkningar.

• Använda sig av ge/injicera för att dela viktig data eller funktioner som behövs över en komponenthierarki som konfigurations- eller API-nycklar. Överanvändning av det kan göra dina komponentförhållanden för komplexa.
• Dokumentera vad leverantörskomponenten ger och vilka efterkommande komponenter som ska injicera. Detta hjälper till att förstå och underhålla dina komponenter, särskilt när du arbetar i team.
• Var försiktig med att skapa beroendeloopar, där en underordnad komponent tillhandahåller något som en överordnad komponent injicerar. Detta kommer att leda till fel och oväntat beteende.

Är tillhandahålla/injicera det bästa alternativet för statlig förvaltning i Vue?

Tillhandahålla/injicera är en annan användbar funktion i Vue för att hantera dataflöde och tillstånd genom komponenter. Ge/injicera kommer med sin del av nackdelar. Tillhandahålla/injicera kan leda till utmaningar vid felsökning, testning och underhåll av storskaliga applikationer.

Att använda Pinia, Vues officiella ramverk för tillståndshantering, skulle vara bäst för att hantera komplexa tillstånd i din Vue-applikation. Pinia tillhandahåller en centraliserad butik och typsäker tillvägagångssätt för statlig förvaltning, vilket gör Vue-apputveckling mer tillgänglig.