counter.vue

<style module>
  .counter {
    & .count {

    }
    & .increment {

    }

    & .decrement {

    }
  }
</style>

<template>
  <div :class="$style.counter">
    <button type="button" :class="$style.increment" @click="set(-15)">-15</button>
    <button type="button" :class="$style.increment" @click="set(-10)">-10</button>
    <button type="button" :class="$style.decrement" @click="decrement">-</button>
    Counter: <span :class="$style.count">{{count}}</span>
    <button type="button" :class="$style.increment" @click="increment">+</button>
    <button type="button" :class="$style.increment" @click="set(10)">+10</button>
    <button type="button" :class="$style.increment" @click="set(15)">+10</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { COUNTER_SET } from '../store/modules/counter';

export default {
  methods: {
    increment() {
      this.count += 1;
    },
    decrement() {
      this.count -= 1;
    },
    set(value) {
      this.count = value;
    }
  },
  computed: {
    count: {
      get() {
        return this.$store.state.counter.c;
      },
      set(value) {
        this.$store.dispatch(COUNTER_SET, value);
      }
    }
  }
}
</script>

store.js

export const COUNTER_INCREMENT = 'counter/increment';
export const COUNTER_DECREMENT = 'counter/decrement';
export const COUNTER_SET = 'counter/set';

export default {
  state: {
    c: 0
  },
  mutations: {
    [COUNTER_INCREMENT]: (state) => { state.c += 1; },
    [COUNTER_DECREMENT]: (state) => { state.c -= 1; },
    [COUNTER_SET]: (state, payload) => { state.c = payload; }
  },
  actions: {
    [COUNTER_INCREMENT]({ commit }) {
      setTimeout(() => {
        commit(COUNTER_INCREMENT);
      }, 1000);
    },
    [COUNTER_DECREMENT]({ commit }) {
      commit(COUNTER_DECREMENT);
    },
    [COUNTER_SET]({ commit }, payload) {
      commit(COUNTER_SET, payload);
    }
  }
};