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.

Zrozumienie problemu wiercenia podporowego

Przed przystąpieniem do rozwiązania 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, będzie to konieczne

przekaż te dane jako rekwizyty do swoich komponentów Vue.

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

• Aplikacja
  • Komponent nadrzędny
    • Komponent podrzędny
      • Komponent GrandChild

Załóżmy, że dane z Aplikacja komponent musi dotrzeć do Komponent GrandChild. 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 rozdętego kodu, który jest trudniejszy do debugowania.

Co to jest dostarczanie/wstrzykiwanie?

Vue rozwiązuje ten problem za pomocą narzędzia dostarczać/wstrzykiwać funkcja, 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. Używa dostarczać możliwość udostępnienia tych danych swoim dzieciom. Oto przykład komponentu dostawcy:

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

Ten blok kodu przedstawia komponent dostawcy, Aplikacja, który zapewnia Powitanie zmienna do wszystkich jej komponentów potomnych. 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:

<scriptsetup>
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 Wnuczka część.

Komponent GrandChild odbiera dane dostarczane przez komponent App. Dzięki temu mechanizmowi można uniknąć przekazywania danych przez Rodzic I Dziecko komponenty, ponieważ te komponenty 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:

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

Załóżmy, że masz aplikację wymagającą globalnego obiektu konfiguracyjnego zawierającego Interfejs programowania aplikacji (API) punkty końcowe, 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 plik, umożliwiając innym komponentom wstrzykiwanie go i używanie go:

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

Powyższy komponent korzysta z wstrzykiwać funkcja umożliwiająca dostęp do globalna konfiguracja obiekt, który aplikacja udostępnia na poziomie globalnym. Dostęp do dowolnych właściwości i ustawień można uzyskać z globalConfig poprzez interpolację lub powiązanie tych właściwości z różne techniki 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

Za pomocą dostarczać/wstrzykiwać, 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, tworząc globalne usługi i ustawienia Klienci API, punkty końcowe, preferencje użytkownika lub magazyny danych — ł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

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

• Używać dostarczać/wstrzykiwać 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.