Απαλλαγείτε από τη διάτρηση Vue Prop με την παροχή/ένεση

από
Tweet
Share
Share
Pin

Το Vue προσφέρει διάφορους τρόπους διαχείρισης της ροής δεδομένων και της επικοινωνίας μεταξύ των στοιχείων. Μια κοινή πρόκληση ως προγραμματιστής του Vue είναι η διάτρηση προπαγίδων, όπου μεταβιβάζετε δεδομένα μέσω διαφόρων επιπέδων στοιχείων, οδηγώντας σε μια πολύπλοκη και λιγότερο διατηρήσιμη βάση κώδικα.

Η Vue προσφέρει τον μηχανισμό παροχής/έγχυσης, μια καθαρή λύση για τη γεώτρηση στήριξης. Η παροχή/ένεση βοηθά στη διαχείριση της επικοινωνίας δεδομένων μεταξύ των γονέων και των βαθιά ένθετων στοιχείων του παιδιού.

Κατανόηση του προβλήματος της διάτρησης στηρίγματος

Πριν εμβαθύνετε στη λύση παροχής/ένεσης, είναι σημαντικό να κατανοήσετε το ζήτημα. Η διάτρηση στηρίγματος πραγματοποιείται όταν χρειάζεται να μεταβιβάσετε δεδομένα από ένα γονικό εξάρτημα ανώτατου επιπέδου σε ένα βαθιά ένθετο θυγατρικό εξάρτημα.

Τα ενδιάμεσα στοιχεία αυτής της ιεραρχίας πρέπει να λαμβάνουν και να μεταβιβάζουν τα δεδομένα, ακόμα κι αν δεν τα χρησιμοποιούν οι ίδιοι. Για να μεταβιβάσετε δεδομένα από ένα γονικό στοιχείο σε ένα θυγατρικό στοιχείο, θα χρειαστεί να μεταβιβάσετε αυτά τα δεδομένα ως στηρίγματα στα στοιχεία του Vue.

Εξετάστε την ακόλουθη ιεραρχία στοιχείων ως παράδειγμα:

Ας υποθέσουμε ότι τα δεδομένα από το στοιχείο της εφαρμογής πρέπει να φτάσουν στο GrandChildComponent. Σε αυτήν την περίπτωση, θα πρέπει να το περάσετε μέσω των δύο ενδιάμεσων στοιχείων χρησιμοποιώντας στηρίγματα, ακόμα κι αν αυτά τα στοιχεία δεν χρειάζονται τα ίδια τα δεδομένα για να λειτουργήσουν σωστά. Αυτό μπορεί να οδηγήσει σε διογκωμένο κώδικα που είναι πιο δύσκολο να εντοπιστεί.

  Πώς να μετατρέψετε την εικόνα σε Grayscale Paint

Τι είναι Παροχή/Ένεση;

Το Vue αντιμετωπίζει αυτό το ζήτημα με τη δυνατότητα παροχής/εισαγωγής, η οποία επιτρέπει σε ένα γονικό στοιχείο να παρέχει δεδομένα ή λειτουργίες στα συναρτήματά του, ανεξάρτητα από το πόσο βαθιά ένθετα είναι. Αυτή η λύση απλοποιεί την κοινή χρήση δεδομένων και βελτιώνει την οργάνωση κώδικα.

Στοιχείο παρόχου

Ένα στοιχείο παρόχου σκοπεύει να μοιραστεί δεδομένα ή μεθόδους με τους απογόνους του. Χρησιμοποιεί την επιλογή παροχής για να κάνει αυτά τα δεδομένα διαθέσιμα στα παιδιά του. Ακολουθεί ένα παράδειγμα στοιχείου παρόχου:

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

Αυτό το μπλοκ κώδικα εμφανίζει ένα στοιχείο παρόχου, την Εφαρμογή, που παρέχει μια μεταβλητή χαιρετισμού σε όλα τα προγενέστερα στοιχεία του. Για να παρέχετε μια μεταβλητή, πρέπει να ορίσετε ένα κλειδί. Η ρύθμιση του κλειδιού με το ίδιο όνομα με τη μεταβλητή βοηθά να διατηρήσετε τον κώδικά σας διατηρήσιμο.

Συστατικά απόγονος

Τα εξαρτήματα απόγονος είναι συστατικά μέσα σε μια ένθετη δομή. Μπορούν να εγχύσουν και να χρησιμοποιήσουν τα παρεχόμενα δεδομένα στην παρουσία τους. Δείτε πώς γίνεται:

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

Το συστατικό απόγονος εισάγει τα παρεχόμενα δεδομένα και μπορεί να έχει πρόσβαση σε αυτά μέσα στο πρότυπό του ως τοπικά καθορισμένη μεταβλητή.

Τώρα, σκεφτείτε την παρακάτω εικόνα:

Σε αυτήν την εικόνα, μπορείτε να δείτε μια ιεραρχία τεσσάρων στοιχείων, ξεκινώντας με ένα ριζικό στοιχείο που χρησιμεύει ως το σημείο εκκίνησης. Τα άλλα στοιχεία φωλιάζουν μέσα στην ιεραρχία, καταλήγοντας στο στοιχείο GrandChild.

Το στοιχείο GrandChild λαμβάνει τα δεδομένα που παρέχει το στοιχείο App. Με αυτόν τον μηχανισμό σε ισχύ, μπορείτε να αποφύγετε τη μετάδοση δεδομένων μέσω των στοιχείων Γονέας και Παιδί, καθώς αυτά τα στοιχεία δεν χρειάζονται τα δεδομένα για να λειτουργήσουν σωστά.

  8 εντυπωσιακά διαδικτυακά πρότυπα διαγραμμάτων συνάφειας για επιχειρήσεις

Παροχή δεδομένων σε επίπεδο εφαρμογής (Παγκόσμιο).

Μπορείτε να παρέχετε δεδομένα σε επίπεδο εφαρμογής με την παροχή/ένεση του Vue. Αυτή είναι μια συνηθισμένη περίπτωση χρήσης για κοινή χρήση δεδομένων και διαμόρφωσης μεταξύ διαφορετικών στοιχείων εντός της εφαρμογής Vue.

Ακολουθεί ένα παράδειγμα για το πώς μπορείτε να παρέχετε δεδομένα σε επίπεδο εφαρμογής:

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

Ας υποθέσουμε ότι έχετε μια εφαρμογή που απαιτεί ένα αντικείμενο καθολικής διαμόρφωσης που περιέχει τελικά σημεία διεπαφής προγραμματισμού εφαρμογής (API), πληροφορίες ελέγχου ταυτότητας χρήστη και άλλες ρυθμίσεις.

Μπορείτε να το επιτύχετε παρέχοντας τα δεδομένα διαμόρφωσης στο στοιχείο ανώτατου επιπέδου, συνήθως στο αρχείο main.js, επιτρέποντας σε άλλα στοιχεία να το εισάγουν και να το χρησιμοποιούν:

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

Το παραπάνω στοιχείο χρησιμοποιεί τη λειτουργία inject για πρόσβαση στο αντικείμενο globalConfig, το οποίο παρέχει η εφαρμογή σε παγκόσμιο επίπεδο. Μπορείτε να αποκτήσετε πρόσβαση σε οποιεσδήποτε ιδιότητες ή ρυθμίσεις από το globalConfig παρεμβάλλοντας ή δεσμεύοντας αυτές τις ιδιότητες με διαφορετικές τεχνικές δέσμευσης δεδομένων στο Vue εντός του στοιχείου.

Οφέλη και χρήσεις του Provide and Inject

Ακολουθούν ορισμένα οφέλη και σημαντικές χρήσεις για τη δυνατότητα παροχής/εισαγωγής κατά τη δημιουργία εφαρμογών ιστού στο Vue.

Καθαρότερος και βελτιστοποιημένος κώδικας απόδοσης

Χρησιμοποιώντας την παροχή/ένεση, καταργείτε την ανάγκη για ενδιάμεσα στοιχεία να μεταδίδουν δεδομένα που δεν χρησιμοποιούν. Αυτό έχει ως αποτέλεσμα πιο καθαρό και πιο διατηρήσιμο κώδικα, μειώνοντας τις περιττές δηλώσεις prop.

Επίσης, το σύστημα αντιδραστικότητας του Vue διασφαλίζει ότι τα στοιχεία αποδίδονται εκ νέου μόνο όταν αλλάζουν οι εξαρτήσεις τους. Η παροχή/ένεση επιτρέπει την αποτελεσματική κοινή χρήση των δεδομένων, γεγονός που μπορεί να οδηγήσει σε βελτιστοποιήσεις απόδοσης μειώνοντας τις περιττές εκ νέου απόδοση.

  Πώς να θολώσετε το φόντο της σύσκεψης στην κλήση Zoom

Βελτιωμένη ενθυλάκωση εξαρτημάτων

Η παροχή/ένεση προάγει την καλύτερη ενθυλάκωση συστατικών. Τα θυγατρικά στοιχεία χρειάζεται μόνο να ανησυχούν για τα δεδομένα που χρησιμοποιούν ρητά, μειώνοντας την εξάρτησή τους από τη συγκεκριμένη δομή δεδομένων των μητρικών στοιχείων.

Εξετάστε ένα στοιχείο επιλογής ημερομηνίας που βασίζεται σε τοπικές ρυθμίσεις μορφής ημερομηνίας. Αντί να μεταβιβάζετε αυτές τις ρυθμίσεις ως στηρίγματα, μπορείτε να τις παρέχετε στο γονικό στοιχείο και να τις εισάγετε μόνο στο στοιχείο επιλογής ημερομηνίας. Αυτό οδηγεί σε σαφέστερο διαχωρισμό των ανησυχιών.

Ενεση εξάρτησης

Η παροχή/ένεση μπορεί να χρησιμεύσει ως μια απλή μορφή ένεσης εξάρτησης, καθιστώντας τις καθολικές υπηρεσίες και ρυθμίσεις —όπως προγράμματα-πελάτες API, τελικά σημεία, προτιμήσεις χρήστη ή αποθήκες δεδομένων— άμεσα διαθέσιμες σε οποιοδήποτε στοιχείο που τις χρειάζεται. Αυτό διασφαλίζει συνεπείς διαμορφώσεις σε όλη την εφαρμογή σας.

Βασικά σημεία που πρέπει να λάβετε υπόψη κατά τη χρήση του Prode and Inject

Ενώ ο μηχανισμός παροχής/ένεσης προσφέρει πολλά πλεονεκτήματα, θα πρέπει να τον χρησιμοποιείτε προσεκτικά για να αποφύγετε ανεπιθύμητες παρενέργειες.

  • Χρησιμοποιήστε την παροχή/ένεση για κοινή χρήση σημαντικών δεδομένων ή λειτουργιών που απαιτούνται σε μια ιεραρχία στοιχείων, όπως κλειδιά διαμόρφωσης ή API. Η υπερβολική χρήση του μπορεί να κάνει τις σχέσεις των εξαρτημάτων σας πολύ περίπλοκες.
  • Τεκμηριώστε τι παρέχει το εξάρτημα παρόχου και ποια απόγονα συστατικά πρέπει να εγχυθούν. Αυτό βοηθά στην κατανόηση και τη διατήρηση των στοιχείων σας, ειδικά όταν εργάζεστε σε ομάδες.
  • Να είστε προσεκτικοί σχετικά με τη δημιουργία βρόχων εξάρτησης, όπου ένα θυγατρικό στοιχείο παρέχει κάτι που εισάγει ένα γονικό στοιχείο. Αυτό θα οδηγήσει σε σφάλματα και απροσδόκητη συμπεριφορά.

Είναι το Provide/Inject η καλύτερη επιλογή για State Management στο Vue;

Η παροχή/ένεση είναι μια άλλη χρήσιμη δυνατότητα στο Vue για τη διαχείριση της ροής δεδομένων και της κατάστασης σε όλα τα στοιχεία. Η παροχή/ένεση συνοδεύεται από μειονεκτήματα. Η παροχή/ένεση μπορεί να οδηγήσει σε προκλήσεις στον εντοπισμό σφαλμάτων, τη δοκιμή και τη διατήρηση εφαρμογών μεγάλης κλίμακας.

Χρησιμοποιώντας το Pinia, το επίσημο πλαίσιο διαχείρισης κράτους του Vue, θα ήταν καλύτερο να χειριστείτε πολύπλοκες καταστάσεις στην εφαρμογή Vue. Το Pinia παρέχει ένα κεντρικό κατάστημα και μια προσέγγιση με ασφάλεια τύπου στη διαχείριση κατάστασης, καθιστώντας την ανάπτυξη εφαρμογών Vue πιο προσιτή.