How does a minimal Vuex implementation look like?

I took Vuex an stripped it down to its simplest form

If you are a front end developer or have been playing with vuejs then you have probably come across vuex. If not then here is what it is.

What is Vuex? · Vuex

I always find it annoying when you watch a tutorial and then the instructor goes like. “You need to npm intsall vue, vuex, vue-router, axios ”and other 10 modules. I think before you introduce a library to your project you should really understand what that library does.

Libraries will come and go. [insert your cool tool here] might be hot today but trust me something better (or worse) will replace it, if not today then tomorrow. If you are the type of developer that follows hype please take time to understand the core concepts before adopting a library.

Getting an understanding on the underlying concepts will help you a lot. For this reason I would like us to look at a minimal implementation of Vuex.

How you typically use Vuex

• You always dispatch an action from your component’s methods

• And then in your actions.js you commit the mutation to the store

• Lastly mutation to the state is done in your mutations.js

• How Vuex is tied up with the Vue ecosystem.

Minimal Vuex Implementation.

Vuex makes use of three things. Actions, Mutations and State. Lets start by making the structure of our implementation.

What goes in the dispatch method?

Dispatch is the central hub of data flow in an application that uses Vuex. It is used to dispatch actions to the store and responsible of calling the correct action.

There is one important thing we have to do in line 8 of the above code. We would like to call the action and pass our commit function and the current state of the store. Lets modify the line

What goes in the commit method?

Through the commit method we can mutate the state of the store. We cannot mutate the store in any part of our implementation except through the commit method.

Are we done?

Believe it or not we are done with the implementation. The last thing we have to do is hook it up with the Vue ecosystem. We will do that via a mixin.

Wrapping Up.

Here is the complete code.

Please bear in mind, this is for learning purposes to understand what happens when you use Vuex. This is a minimal implementation. Vuex has tones of features i.e (getters, modules, e.t.c) which I have not touched on.

If you found this post helpful, please share it so that others can find it. You can follow me on GitHub and LinkedIn. If you have any ideas and improvements feel free to share them with me.

Happy coding! 💪