Bevrijd u van Vue Prop-boren met voorzien/injecteren

Vue biedt verschillende manieren om de gegevensstroom en communicatie tussen componenten te beheren. Een veel voorkomende uitdaging als Vue-ontwikkelaar is prop-boren, waarbij je gegevens door verschillende lagen componenten heen stuurt, wat leidt tot een complexe en minder onderhoudbare codebasis.

Vue biedt het verstrek-/injectiemechanisme, een schone oplossing voor het propboren. Bieden/injecteren helpt bij het beheren van de datacommunicatie tussen ouders en diepgewortelde kindcomponenten.

Het probleem van propboren begrijpen

Voordat u zich verdiept in de oplossing voor toedienen/injecteren, is het belangrijk om het probleem te begrijpen. Prop-boren vindt plaats wanneer u gegevens moet doorgeven van een bovenliggende component op het hoogste niveau naar een diep geneste onderliggende component.

De tussencomponenten in deze hiërarchie moeten de gegevens ontvangen en doorgeven, zelfs als ze deze zelf niet gebruiken. Als u gegevens van een bovenliggende component naar een onderliggende component wilt doorgeven, moet u dit doen

geef deze gegevens door als rekwisieten aan uw Vue-componenten.

Beschouw de volgende componentenhiërarchie als voorbeeld:

• App
  • OuderComponent
    • Onderliggend onderdeel
      • GrandChildComponent

Stel dat gegevens uit de App component moet de bereiken GrandChildComponent. In dat geval zou je het met behulp van rekwisieten door de twee tussenliggende componenten moeten doorgeven, zelfs als die componenten de gegevens zelf niet nodig hebben om correct te functioneren. Dit kan leiden tot opgeblazen code die moeilijker te debuggen is.

Wat is verstrekken/injecteren?

Vue pakt dit probleem aan met de verstrekken/injecteren functie, waarmee een bovenliggende component gegevens of functies aan zijn onderliggende componenten kan leveren, ongeacht hoe diep genest ze zijn. Deze oplossing vereenvoudigt het delen van gegevens en verbetert de organisatie van de code.

Providercomponent

Een providercomponent is van plan gegevens of methoden te delen met zijn nakomelingen. Het maakt gebruik van de voorzien optie om deze gegevens beschikbaar te stellen aan haar kinderen. Hier is een voorbeeld van een providercomponent:

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

Dit codeblok toont een providercomponent, App, dat levert een groet variabel voor al zijn onderliggende componenten. Om een ​​variabele op te geven, moet u een sleutel instellen. Door de sleutel dezelfde naam te geven als de variabele, blijft uw code onderhoudbaar.

Afstammelingen componenten

Onderliggende componenten zijn componenten binnen een geneste structuur. Ze kunnen de verstrekte gegevens in hun componentinstantie injecteren en gebruiken. Zo werkt het:

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

De onderliggende component injecteert de verstrekte gegevens en heeft er toegang toe binnen zijn sjabloon als een lokaal gedefinieerde variabele.

Beschouw nu de onderstaande afbeelding:

In deze afbeelding ziet u een hiërarchie van vier componenten, te beginnen met een hoofdcomponent die als uitgangspunt dient. De andere componenten nestelen zich binnen de hiërarchie en eindigen op de Kleinkind bestanddeel.

Het onderdeel GrandChild ontvangt de gegevens die het onderdeel App levert. Met dit mechanisme kunt u voorkomen dat gegevens via het Ouder En Kind componenten, omdat deze componenten de gegevens niet nodig hebben om correct te functioneren.

Het verstrekken van gegevens op app-(wereldwijd) niveau

Met de provide/inject van Vue kunt u gegevens op app-niveau aanleveren. Dit is een veelvoorkomend gebruiksscenario voor het delen van gegevens en configuratie tussen verschillende componenten binnen uw Vue-applicatie.

Hier ziet u een voorbeeld van hoe u gegevens op app-niveau kunt aanleveren:

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

Stel dat u een toepassing hebt waarvoor een globaal configuratieobject nodig is dat Applicatieprogrammeringsinterface (API) eindpunten, gebruikersauthenticatie-informatie en andere instellingen.

U kunt dit bereiken door de configuratiegegevens op te geven in de component op het hoogste niveau, meestal in uw hoofd.js bestand, waardoor andere componenten het kunnen injecteren en gebruiken:

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

Het bovenstaande onderdeel maakt gebruik van de injecteren functie om toegang te krijgen tot de globalConfig object, dat de app op mondiaal niveau biedt. U kunt toegang krijgen tot alle eigenschappen of instellingen van globalConfig door deze eigenschappen te interpoleren of ermee te binden verschillende databindingstechnieken in Vue binnen het onderdeel.

Voordelen en toepassingen van Provide en Inject

Hier zijn enkele voordelen en belangrijke toepassingen voor de functie 'verstrekken/injecteren' bij het maken van webapplicaties in Vue.

Schonere en meer prestatie-geoptimaliseerde code

Gebruik makend van verstrekken/injecteren, verwijdert u de noodzaak voor tussenliggende componenten om gegevens door te geven die ze niet gebruiken. Dit resulteert in schonere en beter onderhoudbare code door het verminderen van onnodige prop-declaraties.

Bovendien zorgt het reactiviteitssysteem van Vue ervoor dat componenten alleen opnieuw worden weergegeven als hun afhankelijkheden veranderen. Met Provide/inject kunnen gegevens efficiënt worden gedeeld, wat kan leiden tot prestatie-optimalisaties door onnodige herweergave te verminderen.

Verbeterde componentinkapseling

Bieden/injecteren bevordert een betere inkapseling van de componenten. Onderliggende componenten hoeven zich alleen zorgen te maken over de gegevens die ze expliciet gebruiken, waardoor ze minder afhankelijk zijn van de specifieke gegevensstructuur van bovenliggende componenten.

Overweeg een datumkiezercomponent die afhankelijk is van gelokaliseerde datumnotatie-instellingen. In plaats van deze instellingen als rekwisieten door te geven, kunt u ze in de bovenliggende component opgeven en ze alleen in de datumkiezercomponent injecteren. Dit leidt tot een duidelijkere scheiding van zorgen.

Afhankelijkheidsinjectie

Bieden/injecteren kan dienen als een eenvoudige vorm van afhankelijkheidsinjectie, waardoor mondiale diensten en instellingen vergelijkbaar worden API-clients, eindpunten, gebruikersvoorkeuren of datastores zijn direct beschikbaar voor elk onderdeel dat ze nodig heeft. Dit zorgt voor consistente configuraties in uw app.

Essentiële punten waarmee u rekening moet houden bij het gebruik van Provide en Inject

Terwijl de verstrekken/injecteren mechanisme biedt veel voordelen; u moet het zorgvuldig gebruiken om ongewenste bijwerkingen te voorkomen.

• Gebruik verstrekken/injecteren voor het delen van belangrijke gegevens of functies die nodig zijn binnen een componenthiërarchie, zoals configuratie- of API-sleutels. Als u er te veel gebruik van maakt, kunnen uw componentrelaties te complex worden.
• Documenteer wat de providercomponent biedt en welke onderliggende componenten moeten worden geïnjecteerd. Dit helpt bij het begrijpen en onderhouden van uw componenten, vooral wanneer u in teams werkt.
• Wees voorzichtig met het creëren van afhankelijkheidslussen, waarbij een onderliggende component iets biedt dat een bovenliggende component injecteert. Dit zal leiden tot fouten en onverwacht gedrag.

Is verstrekken/injecteren de beste optie voor staatsbeheer in Vue?

Bieden/injecteren is een andere handige functie in Vue voor het beheren van de gegevensstroom en -status in componenten. Bieden / injecteren heeft een aantal nadelen. Bieden/injecteren kan leiden tot uitdagingen bij het debuggen, testen en onderhouden van grootschalige applicaties.

Het gebruik van Pinia, het officiële raamwerk voor statusbeheer van Vue, zou het beste zijn om complexe toestanden in uw Vue-applicatie af te handelen. Pinia biedt een gecentraliseerde opslag- en typeveilige benadering van statusbeheer, waardoor de ontwikkeling van Vue-apps toegankelijker wordt.