რა არის provide და inject გამოიყენება?

Question

Accepted Answer

`provide`/`inject` სშუამავლობით **წინაპრული კომპონენტი მიაწოდოს მონაცემებს ნებისმიერ შთამომავალს**, რა განსხვავება არ იქნება კი, რა სიღრმის გარეშე, props გადაცემის გარეშე ყოველი შუაკედელი კომპონენტისკენ. ისინი ხსნიან **prop drilling**. ## რატომ არის მნიშვნელოვანი ```text App → Layout → Sidebar → Menu → MenuItem ``` თუ მხოლოდ `MenuItem` საჭიროებს `theme`-ს, მისი გადაცემა როგორც prop `Layout`-ის, `Sidebar`-ის და `Menu`-ს მეშვეობით (რომელიც მას არ იყენებს) ზღაპრის და ხმაურიანი. `provide`/`inject` გამოტოვებენ შუას. ## მიწოდება წინაპრულ კომპონენტში ```vue ``` ## ინექცია ნებისმიერ შთამომავალში ```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 ``` მიაწოდოს **რეაქტიული** ობიექტი (the `ref`, არა მისი `.value`) ისე, რომ როდესაც იცვლება, ყველა ინექციის კომპონენტი განახლდება. ## გამოიყენე 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` **დამოკიდებულების ინექციისთვის სუბტრეში**; მიმართე Pinia-ს როდესაც სტეტი ნამდვილად გლობალური ან გაზიარებული აპლიკაციის დაკავშირებული ნაწილებში. ## რატომ არის მნიშვნელოვანი `provide`/`inject` აღმოფხვრის prop drilling მონაცემებისთვის, რომელიც მრავალი ბუდე კომპონენტი იზიარებს (თემები, ლოკალი, ფორმა/კონტექსტი, ჩამატებული სერვისები). ი დეფოლტ/Symbol გასაღებების გამოყენება და მისი განცალკევება გლობალური სტეტიდან (Pinia) საშუალებას გაძლევს გადატანა გაზიარებული კონტექსტი ლამაზად ღრმა კომპონენტის ხეებში.