<template>
  <div>
    <h1>我是Fe</h1>

    <h2>count: {{ count }}</h2>
    <h2>price: {{ price }}</h2>
    <h2>amount: {{ amount }}</h2>
    <button @click="add()">+1</button>
    <button @click="reduce()">延迟++</button>
  </div>
</template>

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

export default {
  computed: {
    // number() {
    //   return this.$store.state.count;
    // },
    ...mapState(['count','price']),
    // amount(){
    //   return this.$store.getters.amount
    // }
    ...mapGetters(['amount'])
  },
  methods: {
    // addHandle(){
    //   this.$store.commit('add')
    // }
    ...mapMutations(['add']),
    reduce(){
      this.$store.dispatch('reduce')
    }
  }
};
</script>

<style>
</style>