011. The Prop Drilling Problem
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
When you need to pass data from a top-level component down to a deeply nested child, passing it as a prop through every single component in the middle (prop drilling) becomes a maintenance nightmare.
022. Provide and Inject
provide and inject solve this. An ancestor component acts as a dependency provider for all its descendants. Any descendant component, regardless of how deep it is, can inject dependencies provided by ancestors up in its active instance tree.
033. Working with Reactivity
When providing reactive state (like ref), it is highly recommended to keep any mutations to that state inside the *provider*. If the child needs to mutate it, the provider should provide a function (method) that mutates the state, and the child can inject and call that function.
?Frequently Asked Questions
Should I use Provide/Inject instead of Pinia?
No. Provide/Inject is great for component libraries (like passing configuration to all child form inputs). Pinia is better for application-wide global state (like the logged-in user or shopping cart).
