Vue.js 2 Design Patterns and Best Practices

Payloads

What if we wanted to let the user decide how much they wanted to increment the count? Let's say we had a textbox that we could add a number and increment the count by that much. If the textbox was set to 0 or was empty, we'd increment the count by 1.

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 ...