In this section, we will make some improvements to our fruit counter app. The goal is to see how we can go about extending our apps using Vuex.
We will update our app by adding additional functionality. Namely, we'll add buttons for different fruits: apples and pears. The number of fruits to eat and the number and kind of fruits eaten will appear in our app too.
Here is the updated JS code. We begin with defining the state in the store:
const store = new Vuex.Store({ state: { count: 5, apples: 0, pears: 0 },
Next, we set up the getters:
getters: { counter(state) { return state.count; }, appleCount(state) { return state.apples; }, pearCount(state) { return state.pears; } },
When defining mutations, we need decrementWithApplesCounter
and decrementWithPearsCounter
, and the resetCounter
functionality:
mutations: { decrementWithApplesCounter(state, payload) { state.count = state.count - 1; ...