इस सुविधाजनक विकल्प का उपयोग करके बॉयलरप्लेट कोड को कम करें और अपने Vue ऐप्स को अधिक रखरखाव योग्य बनाएं।

Vue घटकों के बीच डेटा प्रवाह और संचार को प्रबंधित करने के कई तरीके प्रदान करता है। Vue डेवलपर के रूप में एक आम चुनौती प्रोप ड्रिलिंग है, जहां आप घटकों की विभिन्न परतों के माध्यम से डेटा पास करते हैं, जिससे एक जटिल और कम रखरखाव योग्य कोड बेस बनता है।

Vue प्रोप ड्रिलिंग के लिए एक स्वच्छ समाधान प्रदान/इंजेक्ट तंत्र प्रदान करता है। माता-पिता और गहराई से निहित बाल घटकों के बीच डेटा संचार को प्रबंधित करने में सहायता प्रदान करें/इंजेक्ट करें।

प्रोप ड्रिलिंग समस्या को समझना

प्रदान/इंजेक्शन समाधान पर विचार करने से पहले, समस्या को समझना महत्वपूर्ण है। प्रोप ड्रिलिंग तब होती है जब आपको शीर्ष-स्तरीय मूल घटक से डेटा को गहराई से नेस्टेड चाइल्ड घटक तक पास करने की आवश्यकता होती है।

इस पदानुक्रम में मध्यवर्ती घटकों को डेटा प्राप्त करने और आगे बढ़ाने की आवश्यकता होती है, भले ही वे स्वयं इसका उपयोग न करें। मूल घटक से चाइल्ड घटक में डेटा पास करने के लिए, आपको इसकी आवश्यकता होगी इन डेटा को अपने Vue घटकों के लिए प्रॉप्स के रूप में पास करें.

instagram viewer

एक उदाहरण के रूप में निम्नलिखित घटक पदानुक्रम पर विचार करें:

  • अनुप्रयोग
    • पेरेंटकंपोनेंट
      • बाल घटक
        • ग्रैंडचाइल्डकंपोनेंट

मान लीजिए कि डेटा से अनुप्रयोग घटक तक पहुँचने की आवश्यकता है ग्रैंडचाइल्डकंपोनेंट। उस स्थिति में, आपको प्रॉप्स का उपयोग करके इसे दो मध्यवर्ती घटकों के माध्यम से पारित करने की आवश्यकता होगी, भले ही उन घटकों को सही ढंग से कार्य करने के लिए डेटा की आवश्यकता न हो। इससे कोड फूला हुआ हो सकता है जिसे डीबग करना कठिन हो जाता है।

प्रदान/इंजेक्शन क्या है?

Vue इस मुद्दे को इसके साथ संबोधित करता है उपलब्ध कराना/इंजेक्ट करना सुविधा, जो मूल घटक को अपने वंशज घटकों को डेटा या फ़ंक्शन प्रदान करने की अनुमति देती है, चाहे वे कितने भी गहरे में निहित क्यों न हों। यह समाधान डेटा साझाकरण को सरल बनाता है और कोड संगठन में सुधार करता है।

प्रदाता घटक

एक प्रदाता घटक अपने वंशजों के साथ डेटा या विधियों को साझा करने का इरादा रखता है। इसका उपयोग करता है उपलब्ध करवाना यह डेटा अपने बच्चों को उपलब्ध कराने का विकल्प। यहां प्रदाता घटक का एक उदाहरण दिया गया है:


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

यह कोड ब्लॉक एक प्रदाता घटक दिखाता है, अनुप्रयोग, जो एक प्रदान करता है अभिवादन इसके सभी वंशज घटकों के लिए परिवर्तनशील। एक वेरिएबल प्रदान करने के लिए, आपको एक कुंजी सेट करनी होगी। कुंजी को वेरिएबल के समान नाम पर सेट करने से आपके कोड को बनाए रखने में मदद मिलती है।

वंशज घटक

वंशज घटक एक नेस्टेड संरचना के भीतर के घटक हैं। वे दिए गए डेटा को अपने घटक उदाहरण में इंजेक्ट और उपयोग कर सकते हैं। यहां बताया गया है कि यह कैसे किया जाता है:

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

वंशज घटक प्रदान किए गए डेटा को इंजेक्ट करता है और इसे स्थानीय रूप से परिभाषित चर के रूप में अपने टेम्पलेट के भीतर एक्सेस कर सकता है।

अब, नीचे दी गई छवि पर विचार करें:

इस छवि में, आप चार घटकों का एक पदानुक्रम देख सकते हैं, जिसकी शुरुआत एक मूल घटक से होती है जो शुरुआती बिंदु के रूप में कार्य करता है। अन्य घटक पदानुक्रम के भीतर घोंसला बनाते हैं, अंत में पोता अवयव।

ग्रैंडचाइल्ड घटक वह डेटा प्राप्त करता है जो ऐप घटक प्रदान करता है। इस तंत्र के लागू होने से, आप इसके माध्यम से डेटा भेजने से बच सकते हैं माता-पिता और बच्चा घटक, क्योंकि उन घटकों को सही ढंग से कार्य करने के लिए डेटा की आवश्यकता नहीं होती है।

ऐप (वैश्विक) स्तर पर डेटा प्रदान करना

आप Vue के प्रोवाइड/इंजेक्ट के साथ ऐप स्तर पर डेटा प्रदान कर सकते हैं। यह आपके Vue एप्लिकेशन के भीतर विभिन्न घटकों में डेटा और कॉन्फ़िगरेशन साझा करने के लिए एक सामान्य उपयोग का मामला है।

यहां एक उदाहरण दिया गया है कि आप ऐप स्तर पर डेटा कैसे प्रदान कर सकते हैं:

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

मान लीजिए कि आपके पास एक एप्लिकेशन है जिसके लिए वैश्विक कॉन्फ़िगरेशन ऑब्जेक्ट की आवश्यकता है एप्लीकेशन प्रोग्रामिंग इंटरफ़ेस (एपीआई) समापन बिंदु, उपयोगकर्ता प्रमाणीकरण जानकारी और अन्य सेटिंग्स।

आप शीर्ष स्तर के घटक पर कॉन्फ़िगरेशन डेटा प्रदान करके इसे प्राप्त कर सकते हैं, आमतौर पर अपने में मुख्य.जे.एस फ़ाइल, अन्य घटकों को इंजेक्ट करने और इसका उपयोग करने की अनुमति देती है:

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

उपरोक्त घटक का उपयोग करता है इंजेक्षन तक पहुँचने के लिए फ़ंक्शन ग्लोबलकॉन्फिग ऑब्जेक्ट, जो ऐप वैश्विक स्तर पर प्रदान करता है। आप इन गुणों को इंटरपोल करके या बाइंड करके ग्लोबल कॉन्फ़िग से किसी भी गुण या सेटिंग तक पहुंच सकते हैं Vue में विभिन्न डेटा बाइंडिंग तकनीकें घटक के भीतर.

प्रदान और इंजेक्शन के लाभ और उपयोग

Vue में वेब एप्लिकेशन बनाते समय प्रदान/इंजेक्ट सुविधा के कुछ लाभ और महत्वपूर्ण उपयोग यहां दिए गए हैं।

स्वच्छ और अधिक प्रदर्शन अनुकूलित कोड

का उपयोग करते हुए उपलब्ध कराना/इंजेक्ट करना, आप उन मध्यवर्ती घटकों की आवश्यकता को हटा देते हैं जिनका वे उपयोग नहीं करते हैं। इसके परिणामस्वरूप अनावश्यक प्रोप घोषणाओं को कम करके स्वच्छ और अधिक रखरखाव योग्य कोड प्राप्त होता है।

इसके अलावा, Vue की प्रतिक्रियाशीलता प्रणाली यह सुनिश्चित करती है कि घटक केवल तभी पुन: प्रस्तुत होते हैं जब उनकी निर्भरता बदलती है। प्रोवाइड/इंजेक्ट डेटा को कुशलतापूर्वक साझा करने की अनुमति देता है, जिससे अनावश्यक री-रेंडर को कम करके प्रदर्शन अनुकूलन हो सकता है।

बेहतर घटक एनकैप्सुलेशन

प्रदान/इंजेक्ट बेहतर घटक एनकैप्सुलेशन को बढ़ावा देता है। चाइल्ड घटकों को केवल उस डेटा के बारे में चिंता करने की ज़रूरत है जिसका वे स्पष्ट रूप से उपयोग करते हैं, जिससे मूल घटकों की विशिष्ट डेटा संरचना पर उनकी निर्भरता कम हो जाती है।

एक दिनांक पिकर घटक पर विचार करें जो स्थानीय दिनांक प्रारूप सेटिंग्स पर निर्भर करता है। इन सेटिंग्स को प्रॉप्स के रूप में पास करने के बजाय, आप उन्हें मूल घटक के भीतर प्रदान कर सकते हैं और उन्हें केवल दिनांक पिकर घटक में इंजेक्ट कर सकते हैं। इससे चिंताओं का स्पष्ट अलगाव हो जाता है।

डिपेंडेंसी इंजेक्शन

प्रोवाइड/इंजेक्ट निर्भरता इंजेक्शन के एक सरल रूप के रूप में काम कर सकता है, जिससे वैश्विक सेवाएं और सेटिंग्स समान हो जाती हैं एपीआई क्लाइंट, एंडपॉइंट, उपयोगकर्ता प्राथमिकताएं, या डेटा स्टोर - किसी भी घटक के लिए आसानी से उपलब्ध हैं जिन्हें उनकी आवश्यकता है। यह आपके ऐप में लगातार कॉन्फ़िगरेशन सुनिश्चित करता है।

प्रदान और इंजेक्ट का उपयोग करते समय ध्यान देने योग्य आवश्यक बिंदु

जब उपलब्ध कराना/इंजेक्ट करना तंत्र कई लाभ प्रदान करता है, आपको अवांछित दुष्प्रभावों से बचने के लिए इसका सावधानी से उपयोग करना चाहिए।

  • उपयोग उपलब्ध कराना/इंजेक्ट करना कॉन्फ़िगरेशन या एपीआई कुंजियों जैसे घटक पदानुक्रम में आवश्यक महत्वपूर्ण डेटा या कार्यों को साझा करने के लिए। इसका अत्यधिक उपयोग आपके घटक संबंधों को बहुत जटिल बना सकता है।
  • दस्तावेज़ प्रदान करें कि प्रदाता घटक क्या प्रदान करता है और कौन से वंशज घटकों को इंजेक्ट करना चाहिए। यह आपके घटकों को समझने और बनाए रखने में सहायता करता है, खासकर टीमों में काम करते समय।
  • निर्भरता लूप बनाने के बारे में सावधान रहें, जहां एक चाइल्ड घटक कुछ ऐसा प्रदान करता है जो एक मूल घटक इंजेक्ट करता है। इससे त्रुटियाँ और अप्रत्याशित व्यवहार होगा।

क्या Vue में राज्य प्रबंधन के लिए प्रोवाइड/इंजेक्ट सर्वोत्तम विकल्प है?

संपूर्ण घटकों में डेटा प्रवाह और स्थिति को प्रबंधित करने के लिए Vue में प्रदान/इंजेक्ट एक और उपयोगी सुविधा है। प्रोवाइड/इंजेक्शन अपने साथ कुछ नकारात्मक पहलू भी लेकर आता है। प्रदान/इंजेक्ट करने से डिबगिंग, परीक्षण और बड़े पैमाने के अनुप्रयोगों को बनाए रखने में चुनौतियाँ आ सकती हैं।

Vue के आधिकारिक राज्य प्रबंधन ढांचे, पिनिया का उपयोग करना, आपके Vue एप्लिकेशन में जटिल स्थितियों को संभालने के लिए सबसे अच्छा होगा। पिनिया राज्य प्रबंधन के लिए एक केंद्रीकृत स्टोर और टाइप-सुरक्षित दृष्टिकोण प्रदान करता है, जिससे Vue ऐप विकास अधिक सुलभ हो जाता है।