Για τι χρησιμοποιούνται τα provide και inject;

Question

Accepted Answer

`provide`/`inject` επιτρέπουν σε ένα **component προγόνου να παρέχει δεδομένα σε οποιοδήποτε descendant**, ανεξάρτητα από το βάθος, χωρίς να περνάει props μέσα από κάθε ενδιάμεσο component. Λύνουν το πρόβλημα του **prop drilling**. ## Το πρόβλημα: prop drilling ```text App → Layout → Sidebar → Menu → MenuItem ``` Αν μόνο το `MenuItem` χρειάζεται το `theme`, το να το περνάς ως prop μέσα από το `Layout`, `Sidebar` και `Menu` (που δεν το χρησιμοποιούν) είναι κουραστικό και θορυβώδες. Τα `provide`/`inject` παραλείπουν τα ενδιάμεσα. ## Παροχή σε ένα component προγόνου ```vue ``` ## Εισαγωγή σε οποιοδήποτε descendant ```vue ``` ## Κρατήστε το αντιδραστικό ```js // ✅ provide a ref/reactive so descendants see updates provide("theme", theme); // theme is a ref → reactive // ❌ provide("theme", theme.value) → passes a snapshot, not reactive ``` Παρέχετε το **αντιδραστικό** object (το `ref`, όχι το `.value` του) ώστε όταν αλλάζει, όλα τα εισαγόμενα components ενημερώνονται. ## Χρησιμοποιήστε ένα Symbol key σε βιβλιοθήκες ```js import { themeKey } from "./keys"; // export const themeKey = Symbol() provide(themeKey, theme); // avoids string-key collisions ``` ## provide/inject vs Pinia ```text provide/inject → pass data down a specific subtree (theme, form context, a service) Pinia → global, app-wide shared state (user, cart) usable anywhere ``` Χρησιμοποιήστε `provide`/`inject` για **dependency-injection εντός ενός subtree**· καταφύγετε στο Pinia όταν το state είναι πραγματικά global ή shared σε μη σχετικά μέρη της εφαρμογής. ## Γιατί έχει σημασία Τα `provide`/`inject` εξαλείφουν το prop drilling για δεδομένα που πολλά nested components μοιράζονται (themes, locale, form/context, plugin services). Το να ξέρετε ότι πρέπει να παρέχετε αντιδραστικές τιμές (ώστε οι ενημερώσεις να διαδίδονται), να χρησιμοποιείτε προεπιλεγμένες/Symbol keys και να το διακρίνετε από το global state (Pinia) σας επιτρέπει να περάσετε κοινό context καθαρά διαμέσου βαθιών component trees.