The app that we will build is just a simple fruit counter app. The goal is to help the user make sure to eat five pieces of fruit daily, and we will set up a simple app that will start with five pieces of fruit to eat and, each time we click the button, it will decrement the number by 1. That way, we can keep track of our healthy eating goals.
We will begin our app by setting the initial state, with only one key-value pair in it:
const store = new Vuex.Store({
state: {
count: 5
},Next, we will set up getters. As we learned already, getters only return state:
getters: {
counter(state) {
return state.count;
}
},Next, we will add two mutations: the first mutation, decrementCounter, will operate on the counter by decrementing it by the value stored in the payload argument. We will decrement the value of state.count until it reaches 0. To make sure the value of state.count cannot be less then 0, we'll check it with the ternary statement...