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.
This recipe is for you if you already have some Vuex knowledge and want to expand your horizons.
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...