For Vue 2 state management I recommend Vue-Stash

First in React we had Flux. Then we upgraded to redux. Now we are getting into MobX.

Vue started off with Vuex which is the equivalent of redux. However Vue-Stash is the MobX of Vue.

It’s super simple to setup a store and you can directly set values without having to go through the actions => reducers ceremony. It’s well organized and makes the store the way it should be, out of the way and easier to reason about.

Vue 2 requests that you don’t access parent state directly through child components because whenever you make a change to the parent state it re-renders the child props which reload the child component and the data flow is harder to reason about.

However Vue-Stash kind of builds it way around this. You attach one central store onto the root Vue component’s data.

import Vue from 'vue'
import VueStash from 'vue-stash'
Vue.use(VueStash)
const app = new Vue({
el: '#app',
router: router,
data: {
store: {
message: 'Hi',
age: 30
}
}
})

It then makes this store directly accessible to all your child components with

this.$store 

this.$store is a reference to

this.$root.store

You set a custom option in your child components to choose which properties of the store you want to observe.

store: ['message', 'age']

For each property you choose Vue-Stash will create computed properties using the property names that can read and write from this.$store.propertyName.

In your template you could always do

{{$store.message}}

But because you did

store: ['message']

You can use

{{message}}

When you want to change the message value you can directly edit it.

this.message = ‘Another message’

It uses setters to set this.$store.message.

This means you don’t have to write actions and reducers. You can just write the way you intuitively would and you have a centralized store. It’s still easy to reason about.