A couple of years ago I decided to move out from my Angular 1 with JSPM as transpiler for ES6 know how the next thing. Since I'm not a frontend developer or work with it every day I need to make the right investment only once. At that time, the choices were quite clear, Vue vs React. It was a completely no-brainer going with React, but the mixture of JSX into the JS code plus the verbosity of the code completely threw me off. Because of that, I started looking into Vue and what I saw was a clear learning path from Angular 1.x to a modern SPA framework. There are 2 things I love about it, the first one, the way the templates are structure in "template", "script" and "styles", second, it has a huge community (yes, smaller than React) and third, it can be easily extensible with plugins.

What is state management

Once you get into Vue, one of the things you are going to use soon or later is a state management. What is state management ? In the case of SPAs (Single Page Application), state is a data structure that contains the information describing the application at any given point in time. Now, a real life example: If we had an application consisting of a check box, the state might just be a boolean that says if the check box is checked or not.

I need state management

Once you realize the power behind state management you will never stop using it again. The de-facto choice for Vue is Vuex, which is great for applications as long as they don't grow a lot. Once they grow you will find that is quite cumbersome to maintain the app, the modules and the logic inside the actions. There is no situation where more code is better than less code with the same functionality. If you have been coding for a while, you know that less code is way more maintainable, easy to understand for the next guy / gal in line and less prone to bugs.

Problem #1: Too much code

So, you want just to call an api and save the result ? Let's spice it up and add more complexity since we all know that no serious application looks like the sample codes we see in the official websites. , imagine 2 parts because you want to separate the logic into 2 sections that are kind of independent. The Vuex word for this is "module" which besides giving you the modularity function, it adds to the problem.

import axios from 'axios'

// initial state
const state = () => ({
  price: 0,
})

// getters
const getters = {
  getPrice: (state, getters) => {
    return state.price
  }
}

// actions
const actions = {
  calculateTax ({ commit, state }, {amount, tax}) {
    let taxPrice = amount * (tax / 100)
    let price = taxPrice + amount
    commit('setPrice', price)
  }
}

// mutations
const mutations = {
  setPrice (state, { value }) {
    state.price = value
  }
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

Sources:

Shopping cart example: https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart

Throw in browser storage in

Conclusion