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.
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.
- 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.
Vuex makes use of three things. Actions, Mutations and State. Lets start by making the structure of our implementation.
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
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.
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.
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.
_Happy coding! _💪