provide và inject được dùng để làm gì?

Question

Accepted Answer

`provide`/`inject` cho phép một **component tổ tiên cung cấp dữ liệu cho bất kỳ component con cháu nào**, dù sâu đến đâu, mà không cần truyền props qua mọi component trung gian. Chúng giải quyết **prop drilling**. ## Vấn đề: prop drilling ```text App → Layout → Sidebar → Menu → MenuItem ``` Nếu chỉ `MenuItem` cần `theme`, việc truyền nó dưới dạng prop qua `Layout`, `Sidebar`, và `Menu` (vốn không dùng đến) là rườm rà và nhiễu. `provide`/`inject` bỏ qua phần ở giữa. ## Provide trong một tổ tiên ```vue ``` ## Inject trong bất kỳ con cháu nào ```vue ``` ## Giữ cho nó reactive ```js // ✅ provide một ref/reactive để con cháu thấy được cập nhật provide("theme", theme); // theme là một ref → reactive // ❌ provide("theme", theme.value) → truyền một snapshot, không reactive ``` Provide đối tượng **reactive** (chính `ref`, không phải `.value` của nó) để khi nó thay đổi, tất cả các component inject đều cập nhật. ## Dùng key kiểu Symbol trong thư viện ```js import { themeKey } from "./keys"; // export const themeKey = Symbol() provide(themeKey, theme); // tránh xung đột key dạng chuỗi ``` ## provide/inject và Pinia ```text provide/inject → truyền dữ liệu xuống một subtree cụ thể (theme, context của form, một service) Pinia → state dùng chung toàn cục, toàn app, dùng được ở bất cứ đâu (user, cart) ``` Dùng `provide`/`inject` cho **dependency injection trong một subtree**; chuyển sang Pinia khi state thực sự toàn cục hoặc dùng chung giữa các phần không liên quan của app. ## Tại sao điều này quan trọng `provide`/`inject` loại bỏ prop drilling cho dữ liệu mà nhiều component lồng nhau dùng chung (theme, locale, context của form, service của plugin). Biết provide các giá trị reactive (để cập nhật lan truyền), dùng giá trị mặc định/key Symbol, và phân biệt nó với state toàn cục (Pinia) cho phép bạn truyền context dùng chung gọn gàng qua các cây component sâu.