Liberati dalla perforazione Vue Prop con Provide/Inject

Vue offre diversi modi per gestire il flusso di dati e la comunicazione tra i componenti. Una sfida comune come sviluppatore Vue è il prop drill, in cui si trasmettono i dati attraverso vari livelli di componenti, portando a una base di codice complessa e meno gestibile.

Vue offre il meccanismo di fornitura/iniezione, una soluzione pulita per sostenere la perforazione. Fornire/iniettare aiuta a gestire la comunicazione dei dati tra genitori e componenti figlio profondamente annidati.

Comprendere il problema della perforazione dell'elica

Prima di approfondire la soluzione di fornitura/iniezione, è importante comprendere il problema. Il drill di prop si verifica quando è necessario passare i dati da un componente principale di livello superiore a un componente figlio profondamente nidificato.

I componenti intermedi di questa gerarchia devono ricevere e trasmettere i dati, anche se non li utilizzano direttamente. Per passare i dati da un componente principale a un componente figlio, sarà necessario

passa questi dati come oggetti di scena ai tuoi componenti Vue.

Consideriamo come esempio la seguente gerarchia dei componenti:

• App
  • Componente genitore
    • Componente figlio
      • Componente GrandChild

Supponiamo che i dati da App il componente deve raggiungere il Componente GrandChild. In tal caso, dovresti passarlo attraverso i due componenti intermedi utilizzando oggetti di scena, anche se tali componenti non necessitano dei dati stessi per funzionare correttamente. Ciò può portare a un codice gonfio che è più difficile da eseguire il debug.

Cos'è Fornire/Iniettare?

Vue risolve questo problema con il file fornire/iniettare funzionalità, che consente a un componente principale di fornire dati o funzioni ai suoi componenti discendenti, indipendentemente da quanto profondamente annidati siano. Questa soluzione semplifica la condivisione dei dati e migliora l'organizzazione del codice.

Componente fornitore

Un componente provider intende condividere dati o metodi con i suoi discendenti. Utilizza il fornire possibilità di rendere questi dati disponibili ai propri figli. Ecco un esempio di un componente provider:

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

Questo blocco di codice mostra un componente del provider, App, che fornisce a saluto variabile a tutti i suoi componenti discendenti. Per fornire una variabile, è necessario impostare una chiave. Impostare la chiave sullo stesso nome della variabile aiuta a mantenere il codice manutenibile.

Componenti discendenti

I componenti discendenti sono componenti all'interno di una struttura nidificata. Possono inserire e utilizzare i dati forniti nell'istanza del componente. Ecco come è fatto:

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

Il componente discendente inserisce i dati forniti e può accedervi all'interno del proprio modello come variabile definita localmente.

Ora, considera l'immagine qui sotto:

In questa immagine puoi vedere una gerarchia di quattro componenti, a partire da un componente radice che funge da punto di partenza. Gli altri componenti si annidano all'interno della gerarchia, terminando con Nipote componente.

Il componente GrandChild riceve i dati forniti dal componente App. Con questo meccanismo in atto, puoi evitare di trasferire dati attraverso il file Genitore E Bambino componenti, poiché tali componenti non necessitano dei dati per funzionare correttamente.

Fornitura di dati a livello di app (globale).

Puoi fornire dati a livello di app con il metodo supply/inject di Vue. Questo è un caso d'uso comune per la condivisione di dati e configurazione tra diversi componenti all'interno dell'applicazione Vue.

Ecco un esempio di come puoi fornire dati a livello di app:

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

Supponiamo di avere un'applicazione che richiede un oggetto di configurazione globale contenente Interfaccia di programmazione dell'applicazione (API) endpoint, informazioni di autenticazione dell'utente e altre impostazioni.

Puoi raggiungere questo obiettivo fornendo i dati di configurazione nel componente di livello superiore, in genere nel tuo file main.js file, consentendo ad altri componenti di iniettarlo e utilizzarlo:

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

Il componente precedente utilizza il file iniettare funzione per accedere al globalConfig oggetto, che l'app fornisce a livello globale. È possibile accedere a qualsiasi proprietà o impostazione da globalConfig interpolando o associando queste proprietà con diverse tecniche di associazione dati in Vue all'interno del componente.

Vantaggi e usi di Provide and Inject

Ecco alcuni vantaggi e usi importanti della funzionalità di fornitura/inserimento durante la creazione di applicazioni Web in Vue.

Codice più pulito e ottimizzato per le prestazioni

Utilizzando fornire/iniettare, si elimina la necessità che i componenti intermedi trasmettano i dati che non utilizzano. Ciò si traduce in un codice più pulito e più gestibile riducendo le dichiarazioni di prop non necessarie.

Inoltre, il sistema di reattività di Vue garantisce che i componenti vengano nuovamente visualizzati solo quando le loro dipendenze cambiano. Fornire/inserire consente di condividere i dati in modo efficiente, il che può portare a ottimizzazioni delle prestazioni riducendo i nuovi rendering non necessari.

Incapsulamento dei componenti migliorato

Fornire/iniettare promuove un migliore incapsulamento dei componenti. I componenti secondari devono preoccuparsi solo dei dati che utilizzano esplicitamente, riducendo la loro dipendenza dalla struttura dati specifica dei componenti principali.

Prendi in considerazione un componente di selezione della data che si basa sulle impostazioni del formato della data localizzato. Invece di passare queste impostazioni come oggetti di scena, puoi fornirle all'interno del componente principale e inserirle solo nel componente di selezione della data. Ciò porta ad una più chiara separazione delle preoccupazioni.

Iniezione di dipendenza

Provide/inject può fungere da semplice forma di inserimento delle dipendenze, creando servizi e impostazioni globali, come Client API, endpoint, preferenze utente o archivi dati: subito disponibili per qualsiasi componente che ne abbia bisogno. Ciò garantisce configurazioni coerenti in tutta l'app.

Punti essenziali da considerare quando si utilizza Provide and Inject

Mentre il fornire/iniettare Il meccanismo offre molti vantaggi, dovresti usarlo con attenzione per evitare effetti collaterali indesiderati.

• Utilizzo fornire/iniettare per condividere dati importanti o funzioni necessarie attraverso una gerarchia di componenti come la configurazione o le chiavi API. Un uso eccessivo può rendere le relazioni dei componenti troppo complesse.
• Documentare ciò che fornisce il componente provider e quali componenti discendenti dovrebbero inserire. Ciò aiuta a comprendere e mantenere i componenti, soprattutto quando si lavora in team.
• Sii cauto nel creare cicli di dipendenza, in cui un componente figlio fornisce qualcosa che un componente genitore inserisce. Ciò porterà a errori e comportamenti imprevisti.

Provide/Inject è l'opzione migliore per la gestione dello stato in Vue?

Fornire/iniettare è un'altra funzionalità utile di Vue per la gestione del flusso di dati e dello stato nei componenti. Fornire/iniettare comporta la sua parte di svantaggi. Fornire/inserire può portare a sfide nel debug, nel test e nella manutenzione di applicazioni su larga scala.

Utilizzare Pinia, il framework ufficiale di gestione dello stato di Vue, sarebbe la soluzione migliore per gestire stati complessi nella tua applicazione Vue. Pinia fornisce uno store centralizzato e un approccio indipendente dai tipi alla gestione dello stato, rendendo lo sviluppo di app Vue più accessibile.