Search code examples
javascriptvue.jsvuejs2storeflux

How is Vuex different than a store object?

I'm using Vuex for Vue 2 (kind of like Redux for React). I found an example of usage which updates a counter, with code like this:

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

var store = new Vuex.Store({
  state: {
    counter: 0
  },
  mutations: {
    INCREMENT (state) {
      state.counter ++
    }
  }
})

export default store

My question is, how is this different than simply forgoing Vuex and making a manual store? Then it would be:

import Vue from 'vue'

var store = {
  state: {
    counter: 0
  },
  mutations: {
    INCREMENT (state) {
      state.counter ++
    }
  }
}

export default store
Solution

  • It implements other tools, integrations, helpers:

    • VueJS Dev Tools integration with roll back, timeline
    • Implement third party plugins
    • use of mapState, mapActions, map... to simplify coding
    • etc,