component.vue

<template>
  <div>
    <h2>Vuex Example:</h2>
    <button type="button" @click="decrement(5)">Subtract 5</button>
    <button type="button">Subtract 1</button>
    <input type="text" disabled v-model="counter"/> 
    <button type="button">Add 1</button>
    <button type="button">Add 5</button>
  </div>
</template>

<script>
  import store from '../store';
  import { mapMutations } from 'vuex';
  export default {
    name: 'vuex',
    computed: {
      counter() {
        return store.state.counter
      }
    },
    methods: {
      increment: function (n) {
        store.commit('increment', n);
      },
      decrement: function (n) {
        store.commit('decrement', n);
      }
    }
  }
</script>

vuexstore.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    counter: 0
  },
  mutations: {
    increment(state, n) {
      state.counter += n
    },
    decrement(state, n) {
      state.counter -= n
    },
  },
});

export default store;