Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

State Management with Vuex Chapter 21

Our template would, therefore, look like this:

<template>

<div>

<h1>{{count}}</h1>

<input type="text" v-model="amount">

<button @click="increment">+</button>

<button @click="decrement">-</button>

<button @click="reset">R</button>

</div>

</template>

We'd place the amount value on our local component state, as this doesn't necessarily need
to be part of the main Vuex Store. This is an important realization to make, as it means we

can still have local data/computed values if necessary. We can also update our methods to
pass the amount through to our actions/mutations:

export default {

data() {

return {

amount: 0,

};

},

methods: {

increment() {

this.$store.dispatch(types.INCREMENT, this.getAmount);

},

decrement() {

this.$store.dispatch(types.DECREMENT, this.getAmount);

},

reset() {

this.$store.dispatch(types.RESET);

},

},

computed: {

count() {

return this.$store.getters.count;

},

getAmount() {

return Number(this.amount) || 1;

},

},

};