State Provider
Learn how we implement the state provider in Vue using provide/inject methods.
We'll cover the following...
The provide/inject
methods. Though this pattern was already possible in Vue 2, it was unpopular. It might be because values passed through provide aren’t reactive by default. Overall, working with provide/inject
through Options API isn’t as easy compared to using it through Composition API.
Spinner
Imagine an application that needs to display an overlay with a spinner over the rest of the app, as shown below.
This feature is needed to prevent a user from doing anything in an app for a moment and to indicate that something is happening. What’s more, it should be possible to activate this overlay with a spinner from anywhere in an application. The State Provider pattern is a great choice for this because:
- We need to provide a way for components around the application to consume the spinner state and methods to turn it on or off.
- We need markup to display an overlay and the