Building getters to help retrieve your data

You don't want to keep too much data in your state. It can be especially dangerous to keep duplicate or derivative data because it can be brought out of sync very easily. Getters help you with this without shifting the burden onto the components by keeping all the logic in one place.

Getting ready

This recipe is for you if you already have some Vuex knowledge and want to expand your horizons.

How to do it...

Imagine that you are building a Bitcoin wallet. You want to give your users an overview of their balance, and you want them to see how many Euros it corresponds to. Create a new Webpack template with vue init webpack and npm install vuex. Create a new src/store/index.js file and write the following inside it:

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    bitcoin: 600,
    rate: 1000,
    euro: 600000
  }
})

export default store

This code is prone to errors. The first error can be a miscalculation...