DEV Community

Cover image for  ̶R̶e̶a̶c̶t̶ VUE Context Provider Pattern | Custom Hooks

Posted on

̶R̶e̶a̶c̶t̶ VUE Context Provider Pattern | Custom Hooks

Table Of Contents

The Problem:

Vue has lots of tools out of the box that makes our life easier, e.g Vuex and Vue-router. But it still relies too much on magic connections, which makes code hard to understand. In order to help IDE and future me with code readability, I've started to think about hooks and patterns that comes along with them.

The Code:

In this sandbox, you can find React's Context Provider Pattern - applied to Vue's Composition API provide and inject methods.

The Conclusion:

Vue has a very powerful plugin Vuex for state management. But often you are unable to share the state in a simpler way or to multiply the same state functionality. Therefore you have two standard solutions, props drilling and provide/inject. Drilling is good as long it's no deeper than 3 levels. But provide/inject, in their raw form are relying too much on magic for my taste.

So the takeaway is: if Composition API borrows so much from React already, why not keep that in mind and make Vue more lovable by combining the best of both worlds. Don't be afraid to experiment by mix features and patterns for the greater good.

May the bugs avoid you,

Discussion (2)

iamandrewluca profile image
Andrew Luca

He tries to kill vuex. Boooo 😂😂😂
Nice one!

sincovschi profile image
Eugene Author

Thanks! Vuex is really good, but I prefer to keep state related to component functionalities inside itself, even if it starts from Vuex and user or app global state into Vuex.
Makes logical flow simpler and decouples dependencies.