Build Vuex from scratch.
Tags: javascript, tech, programming, vue
Published: 2018-06-20 16:38:09

---
title: Build Vuex from scratch.
published: true
tags: javascript,tech,programming,vue
canonical_url: 
---

#### I took Vuex an stripped it down to its simplest form

![](https://cdn-images-1.medium.com/max/701/1*vmhxmp5jRp-4Rtfh3skrgQ.png)

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](https://vuex.vuejs.org/en/intro.html)

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

{% gist https://gist.github.com/sadick254/5917699771cc12b017bdca50f5cfcf26 %}

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

{% gist https://gist.github.com/sadick254/aa7d1fbe6e160af9d51a0826b5b51d4d %}

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

{% gist https://gist.github.com/sadick254/b9dfe74fc313b821b0cd7538a7947e84 %}

- How Vuex is tied up with the Vue ecosystem.

{% gist https://gist.github.com/sadick254/7d89e00a99187790ec45a1a6edd545a9 %}

### **Minimal Vuex Implementation.**

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

{% gist https://gist.github.com/sadick254/bea6bc30b1cd01df5b05cdc5793b509c %}

#### 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.

{% gist https://gist.github.com/sadick254/b4fe1373b7d0d39ebcc1535fe419351e %}

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

{% gist https://gist.github.com/sadick254/2b6478e05a9418fc01fea0f667bf1d88 %}

{% gist https://gist.github.com/sadick254/198768b1c7195dec507ee9953460cbdf %}

#### 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.

{% gist https://gist.github.com/sadick254/af09bb47e9bb0dfb4418d6971d692fa4 %}

#### 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.

{% gist https://gist.github.com/sadick254/c77eff475e1debcd0b4e66105ee37e1e %}

#### Wrapping Up.

Here is the complete code.

{% gist https://gist.github.com/sadick254/87a3d54919f9ddb40a9af355b8569283 %}

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_](https://github.com/sadick254) _and_ [_LinkedIn_](https://www.linkedin.com/in/isaac-odhiambo-678b1547/)_. If you have any ideas and improvements feel free to share them with me._

_Happy coding! _💪