VueJS and Dependency Injection
This post is a secret! Read more about RSS Club.
(This post was originally published on CodePen, but I’m putting it here. Enjoy!)
I was reading the recently updated Vue docs and saw a bit about Dependency Injection, provide, and inject. I hadn’t ever noticed these features before. The docs give an example of utilizing this for google maps, but don’t really give examples of it otherwise. I felt I should experiment with it some.
First off, what are provide and inject? provide is an API in Vue that lets you specify values that’ll get passed down into components nested within this top level component. inject is the API for getting the values in a nested component. It’s a way to not have to pass props to every component or go looking for attributes on $parent. The downside to provide is that it isn’t reactive. Here’s a simple example:
In this pen you can see, that while the app instance can change its thing value, the nested component doesn’t receive those updates.
Well, this feature seems less useful, right? Well… Sort of… Let’s see if we can use provide to update a nested value later…
In this example, I’ve made provide pass a Promise that is resolved by a Vue event. That event is triggered when you push the update button at which point it resolves the Promise and passes the value of thing to the nested component. This isn’t very useful in this fashion, but let’s say you have a fetch statement that should resolve and you want your nested components to change from their loading state. This would be a way to do that.
While this is a neat trick, you probably want to end up using a state management library, like vuex, to handle situations like this however, and these keywords are really meant to be used sparingly.