Vue.js 2 Design Patterns and Best Practices

Combining elements

In order to pull this all together, we have to revisit our store/index.js file and add the appropriate state, actions, getters, and mutations:

import Vue from 'vue';import Vuex from 'vuex';import actions from './actions';import getters from './getters';import mutations from './mutations';Vue.use(Vuex);export default new Vuex.Store({  state: {    count: 0,  },  actions,  getters,  mutations,});

In our App.vue, we can create a template that will give us the current count as well as some buttons to increment, decrement, and reset state:

<template>  <div>    <h1>{{count}}</h1>    <button @click="increment">+</button>    <button @click="decrement">-</button>    <button @click="reset">R</button>  </div></template>

Whenever the user clicks on a button, ...