<template>
  <div>
    Clicked: {{ count }} times, count is {{ evenOrOdd }}.<br>
    <button @click="increment">
      +
    </button>
    <button @click="decrement">
      -
    </button>
    <button @click="incrementIfOdd">
      Increment if odd
    </button>
    <button @click="incrementAsync">
      Increment async
    </button>
    <br><br>
    <span>Set Count: </span>
    <input
      type="number"
      :value="count"
      @input="set($event.target.value || 0)"
    >
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['evenOrOdd']),
  },
  methods: {
    ...mapMutations(['set']),
    ...mapActions([
      'increment',
      'decrement',
      'incrementIfOdd',
      'incrementAsync',
    ]),
  },
}
</script>
