Vue Dependency Injection Simplified
HTML-код
- Опубликовано: 8 сен 2024
- Dependency injection using the provide/inject pattern is a great way to make your app more readable and easy to maintain.
✅ FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS
learnvue.co/vu...
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co...
Music by Lukrembo
Started following your channel some weeks ago and I don't regret it. Your videos aren't very lengthy but always precise and straight to the point. 👍🏽
appreciate it! you’re the best for this comment 💚
Rewatching this due to being jammed up with a user merged with defaults library config data -> prop validator data currently using provide/inject pattern.
Really appreciated the chill bg music this time around @LearnVue :) Cheers and happy coding!
Love this short format! Every time RUclips suggests your video, I am like: "Cool topic, I should add this video to Watch Later... Oh, it's only 3 minutes long, better watch now". Therefore I have a ton of videos in my Watch Later list, but yours only in History 😋
istg today i found out about this when i needed it the least.. i still appreciate it
It’s a mix feeling using provide and inject, it is definitely handy in nested structure, however if you want to constrain the exactly what the component needs and make it clean and slim, I slowly back to the habit to use props way.
👏🏼👏🏼👏🏼 always wondered what I was doing wrong with passing data to child components, this helps a ton!
How did i not know this before, this is amazing. Thank you
Great video! Appreciate that you showed how to do it with
Of course! is pretty handy (once you understand the original setup syntax)!
Great description, thanks
Readonly capabilities from Vue 🔥 🔥
As always great but the music volume level is to high, about 1/3 too loud :) overall thank You for amazing new tip :)
Sorry about that! Thanks for the feedback and I'll keep an eye on that for future vids 😀
Music’s just right on my end. No change necessary. ;)
I‘d say 10% less would be perfect :D
I’m pretty sure you’re aware of this, that the Composition API also provides an alternative for this kind of situations through state management, which is really useful and works just as well as Vuex (for small projects at least). It would be really interesting to watch your take on this :) Thank you!
@dnvdk I have that one pending :)
i've also been looking at PINIA, would you all be interested in a quick video?
@@LearnVue more than interested! :)
Nise!!! I really like this feature.. thanks for showing it.
you're welcome! glad you like it
Thank you so much for this! Helped me a lot!
glad it helped!!
Can you please make a tutorial on how to watch for changes in the provided data. E.g. Watching for a change in a variable that resides in the drawer component?
Thanks!
useContext for vue
Isnt it better to export a reactive const and import it where needed? Whats the benefits to use this way?
Export a reactive const would be a way to mimic a store like state where any component (regardless of hierarchy) could access the data. Provide/inject works more like props where the components that need access to this data have a parent/child relationship.
While I think having some sort of application state has many purposes (Vuex), in strictly parent/child components, it can make your data better represent your component structure and reduce the possible number of places where your data can be mutated.
amazing, thanks!
♥️♥️♥️
What if our child component is very deep in tree so when we provide reactive data to child does it will re-render all the components in between child and parent component?
Good question
Why don't you just use Pinia?
that's also possible, this is what pinia does behind the scenes!
Why does it feels like a state management/Vuex all over again.
because it is! this is a more minimal way to implement state management across components without adding a full library.
the background music is disgusting