Sadick

Posted on Jun 20, 2018 • Originally published at Medium on Dec 29, 2017

Build Vuex from scratch.

#javascript #tech #programming #vue

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! _💪

Top comments (5)

Benjamin CARADEUC • Oct 8 '18

Hi!

I am very interested in this little implementation but can't get it to work.

I maybe did something wrong...

here is my modified implementation:

class Store {
  constructor (options = {}) {
    this._state = { ...options.state }
    this._actions = { ...options.actions }
    this._mutations = { ...options.mutations }
  }

  dispatch (action, payload) {
    if (!this._actions[action]) {
      throw new Error(`[Error] action ${action} is undefined`)
    }

    return this._actions[action](
      {
        commit: this.commit.bind(this),
        state: { ...this._state }
      },
      payload
    )
  }

  commit (type, payload) {
    if (!this._mutations[type]) {
      throw new Error(`[Error] mutation ${type} is undefined`)
    }

    return this._mutations[type].call(null, this._state, payload)
  }
}

function install (Vue) {
  Vue.$store = Vue.mixin({
    created () {
      if (this.$options.store) {
        this.$store = this.$options.store
      } else if (this.$options.parent && this.$options.parent.$store) {
        this.$store = this.$options.parent.$store
        Vue.util.defineReactive(this, 'state', this.$store)
      }
    }
  })
}

export default {
  install,
  Store
}

I can dispatch the actions, commit the mutations and I can see my state has been updated but I don't understant how to get the state value in my vue file :(

For example after mutating a users array in the state, I try to use this :

this.$store.state.users
this.$store.users
this.state.users

but neither of these are working...

Could you tell me what I'm doing wrong ?

Thanks!

Sadick • Oct 11 '18

What do you get when you console.log(Vue.$store)?

Benjamin CARADEUC • Oct 11 '18

I just modified this line and it worked Vue.util.defineReactive(this, 'state', this.$store._state)

Sadick • Oct 11 '18 • Edited

Nice to know that it worked.

Bob Bass • Apr 30 '22

I've been working on building my own version of Vuex but for react because I strongly prefer it over Redux.

I've been hitting so many strange edge cases that were so hard to work through. I really wanted to avoid digging through the Vuex code because I don't want to steal it exactly, I want to build my own version using patterns that I enjoy working with, while keeping the same general syntax.

Good for you for taking this project on, I'm certainly growing as a developer from my efforts to do the same but your code is clean and readable. This was cool to read.

DEV Community

Build Vuex from scratch.

I took Vuex an stripped it down to its simplest form

How you typically use Vuex

Minimal Vuex Implementation.

What goes in the dispatch method?

What goes in the commit method?

Are we done?

Wrapping Up.

Top comments (5)

Read next

Integrating Live Activity and Dynamic Island in iOS: A Complete Guide

Ng-News 24/46: Angular Camp, TypeScript 5.7 RC

Building and Comparing Table Data Made Easy with @libs-jd/table-data-kit

Mastering JavaScript Memory: A Beginner’s Guide to Stack and Heap