<template>

  <div class="hello">

    <p>{{count}}</p>

    <p>

      <button @click="increment">+</button>

      <button @click="decrement">-</button>

      <button @click="incrementIfOdd">Increment if odd</button>

      <button @click="incrementAsync">Increment async</button>

    </p>

  </div>

</template>

<script>

import {mapGetters,mapMutations,mapActions} from 'vuex'

export default {

  name: 'hello',

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'

    }

  },

  computed:{

    ...mapGetters([

      'count',

      'evenOrOdd'

    ])

  },

  methods:{

    increment(){

      this.$store.dispatch('increment')

    },

    decrement(){

      this.$store.dispatch('decrement')

    },

    incrementIfOdd(){

      this.$store.dispatch('incrementIfOdd')

    },

    incrementAsync(){

      this.$store.dispatch('incrementAsync')

    }

  }

}

</script>