Uwolnij się od wiercenia Vue Prop dzięki Provide/Inject

Vue oferuje kilka sposobów zarządzania przepływem danych i komunikacją pomiędzy komponentami. Częstym wyzwaniem dla programistów Vue jest wiercenie rekwizytów, podczas którego przekazujesz dane przez różne warstwy komponentów, co prowadzi do złożonej i trudniejszej w utrzymaniu bazy kodu.

Vue oferuje mechanizm dostarczania/wstrzykiwania, czyste rozwiązanie do wiercenia podporowego. Provide/Inject pomaga zarządzać komunikacją danych pomiędzy elementami nadrzędnymi a głęboko zagnieżdżonymi komponentami podrzędnymi.

Spis treści:

Zrozumienie problemu wiercenia podporowego

Przed zagłębieniem się w rozwiązanie dostarczania/wstrzykiwania ważne jest zrozumienie problemu. Wiercenie podpór ma miejsce, gdy trzeba przekazać dane z komponentu nadrzędnego najwyższego poziomu do głęboko zagnieżdżonego komponentu podrzędnego.

Komponenty pośrednie w tej hierarchii muszą odbierać i przekazywać dane, nawet jeśli same z nich nie korzystają. Aby przekazać dane z komponentu nadrzędnego do komponentu podrzędnego, musisz przekazać te dane jako rekwizyty do komponentów Vue.

Jako przykład rozważ następującą hierarchię komponentów:

Załóżmy, że dane ze komponentu App muszą dotrzeć do komponentu GrandChildComponent. W takim przypadku musiałbyś przekazać go przez dwa komponenty pośrednie za pomocą rekwizytów, nawet jeśli te komponenty same w sobie nie potrzebują danych do prawidłowego działania. Może to prowadzić do powstania rozdętego kodu, który jest trudniejszy do debugowania.

Co to jest dostarczanie/wstrzykiwanie?

Vue rozwiązuje ten problem za pomocą funkcji udostępniania/wstrzykiwania, która umożliwia komponentowi nadrzędnemu dostarczanie danych lub funkcji komponentom potomnym, niezależnie od tego, jak głęboko są one zagnieżdżone. Rozwiązanie to upraszcza udostępnianie danych i poprawia organizację kodu.

Komponent dostawcy

Komponent dostawcy zamierza udostępniać dane lub metody swoim potomkom. Korzysta z opcji udostępniania, aby udostępnić te dane swoim dzieciom. Oto przykład komponentu dostawcy:

 
<template>
  <div>
    
    <ParentComponent/>
  </div>
</template><script setup>
import { provide } from 'vue';
import ParentComponent from './components/ParentComponent.vue';
const greeting = 'Hello from Provider';
provide('greeting', greeting);
</script>

Ten blok kodu przedstawia komponent dostawcy App, który udostępnia zmienną powitalną wszystkim swoim komponentom potomnym. Aby udostępnić zmienną, musisz ustawić klucz. Ustawienie klucza na tę samą nazwę co zmienna pomaga utrzymać kod w utrzymaniu.

Składniki potomne

Komponenty potomne są komponentami struktury zagnieżdżonej. Mogą wstrzykiwać i wykorzystywać dostarczone dane w swojej instancji komponentu. Oto jak to się robi:

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

Komponent potomny wstrzykuje dostarczone dane i może uzyskać do nich dostęp w ramach swojego szablonu jako zmienną zdefiniowaną lokalnie.

Teraz rozważ poniższy obrazek:

Na tym obrazie widać hierarchię czterech komponentów, zaczynającą się od komponentu głównego, który służy jako punkt wyjścia. Pozostałe komponenty zagnieżdżają się w hierarchii, kończąc na komponencie GrandChild.

Komponent GrandChild odbiera dane dostarczane przez komponent App. Dzięki temu mechanizmowi można uniknąć przekazywania danych przez komponenty Parent i Child, ponieważ komponenty te nie potrzebują danych do prawidłowego działania.

Dostarczanie danych na poziomie aplikacji (globalnym).

Możesz dostarczać dane na poziomie aplikacji za pomocą funkcji dostarczania/wstrzykiwania Vue. Jest to częsty przypadek użycia danych i konfiguracji pomiędzy różnymi komponentami aplikacji Vue.

Oto przykład udostępniania danych na poziomie aplikacji:

 import { createApp } from 'vue'
import App from './App.vue'
const globalConfig = {
  apiUrl: 'https://example.com/api',
  authKey: 'my-secret-key',
  
};
app.provide('globalConfig', globalConfig);
createApp(App).mount('#app')

Załóżmy, że masz aplikację wymagającą globalnego obiektu konfiguracji zawierającego punkty końcowe interfejsu programowania aplikacji (API), informacje o uwierzytelnianiu użytkownika i inne ustawienia.

Można to osiągnąć, dostarczając dane konfiguracyjne w komponencie najwyższego poziomu, zwykle w pliku main.js, umożliwiając innym komponentom ich wstrzykiwanie i używanie:

 <template>
  <div>
    <h1>API Settings</h1>
    <p>API URL: {{ globalConfig.apiUrl }}</p>
    <p>Authentication Key: {{ globalConfig.authKey }}</p>
  </div>
</template><script setup>
import { inject } from 'vue';
const globalConfig = inject('globalConfig');
</script>

Powyższy komponent korzysta z funkcji inject w celu uzyskania dostępu do obiektu globalConfig, który aplikacja udostępnia na poziomie globalnym. Dostęp do dowolnych właściwości lub ustawień można uzyskać z globalConfig, interpolując lub wiążąc te właściwości z różnymi technikami wiązania danych w Vue w komponencie.

Korzyści i zastosowania Provide and Inject

Oto kilka korzyści i ważnych zastosowań funkcji udostępniania/wstrzykiwania podczas tworzenia aplikacji internetowych w Vue.

Czystszy i bardziej zoptymalizowany pod względem wydajności kod

Używając udostępniania/wstrzykiwania, eliminujesz potrzebę przekazywania przez komponenty pośrednie danych, których nie używają. Powoduje to czystszy i łatwiejszy w utrzymaniu kod poprzez redukcję niepotrzebnych deklaracji właściwości.

Ponadto system reaktywności Vue gwarantuje, że komponenty będą ponownie renderowane tylko wtedy, gdy zmienią się ich zależności. Funkcja Provide/Inject umożliwia efektywne udostępnianie danych, co może prowadzić do optymalizacji wydajności poprzez redukcję niepotrzebnych ponownych renderowań.

Ulepszona enkapsulacja komponentów

Provide/Inject promuje lepszą enkapsulację komponentów. Komponenty podrzędne muszą martwić się jedynie danymi, których jawnie używają, co zmniejsza ich zależność od specyficznej struktury danych komponentów nadrzędnych.

Rozważmy komponent selektora dat, który opiera się na zlokalizowanych ustawieniach formatu daty. Zamiast przekazywać te ustawienia jako rekwizyty, możesz podać je w komponencie nadrzędnym i wstrzyknąć je tylko w komponencie wyboru daty. Prowadzi to do wyraźniejszego rozdzielenia obaw.

Wstrzyknięcie zależności

Provide/Inject może służyć jako prosta forma wstrzykiwania zależności, dzięki czemu globalne usługi i ustawienia — takie jak klienci API, punkty końcowe, preferencje użytkownika lub magazyny danych — są łatwo dostępne dla każdego komponentu, który ich potrzebuje. Zapewnia to spójne konfiguracje w całej aplikacji.

Podstawowe punkty do rozważenia podczas korzystania z funkcji Provide i Inject

Chociaż mechanizm dostarczania/wstrzykiwania ma wiele zalet, należy go używać ostrożnie, aby uniknąć niepożądanych skutków ubocznych.

Użyj udostępniania/wstrzykiwania do udostępniania ważnych danych lub funkcji potrzebnych w całej hierarchii komponentów, takich jak klucze konfiguracyjne lub API. Nadużywanie może sprawić, że relacje między komponentami będą zbyt skomplikowane.
Udokumentuj, co zapewnia komponent dostawcy i jakie komponenty potomne powinny wstrzykiwać. Pomaga to w zrozumieniu i utrzymaniu komponentów, szczególnie podczas pracy w zespołach.
Zachowaj ostrożność podczas tworzenia pętli zależności, w których komponent podrzędny zapewnia coś, co wstrzykuje komponent nadrzędny. Będzie to prowadzić do błędów i nieoczekiwanych zachowań.

Czy Provide/Inject to najlepsza opcja zarządzania stanem w Vue?

Provide/Inject to kolejna przydatna funkcja Vue do zarządzania przepływem danych i stanem komponentów. Opcja Provide/Inject ma swoje wady. Dostarczanie/wstrzykiwanie może prowadzić do wyzwań w debugowaniu, testowaniu i utrzymywaniu aplikacji na dużą skalę.

Do obsługi złożonych stanów w aplikacji Vue najlepiej sprawdzi się Pinia, oficjalny framework zarządzania stanem Vue. Pinia zapewnia scentralizowane podejście do zarządzania stanem i bezpieczne dla typów, dzięki czemu tworzenie aplikacji Vue jest bardziej dostępne.