1. <template>
    2.   <div class="home">
    3.      <p>{{this.$store.state.count}}</p>
    4.      <button @click="add">增加</button>
    5.      <!-- reduce -->
    6.      <button @click="reduce">减少</button>
    7.   </div>
    8. </template>
    10. <script>
    11. import {mapActions} from 'vuex'
    12. export default {
    13.   name: 'Home',
    14.   methods:{
    15.     ...mapActions(["add","reduce"])
    16.   }
    17. }
    18. </script>
    1. export default new Vuex.Store({
    2.   state: {
    3.     count:1
    4.   },
    5.   mutations: {
    6.     increase(state){
    7.       state.count++
    8.     },
    9.     decrease(state){
    10.       state.count--
    11.     }
    12.   },
    13.   actions:{
    14.     add(ctx){
    15.       ctx.commit("increase")
    16.     },
    17.     reduce(ctx){
    18.       ctx.commit("decrease")
    19.     }
    20.   },
    21.   modules: {
    22.   }
    23. })