1、从一个计数器说起

一、vuex定义count

export default new Vuex.Store({
  state: {
    count:1
  }
})

二、在组件中派发一个事件给vuex的actions

this.$store.dispatch()

<template>
  <div class="home">
     <button  @click="add">
       {{this.$store.state.count}}</button>
  </div>
</template>
<script>
export default {
  name: 'Home',
  methods:{
    add(){
      this.$store.dispatch("add")
    }
  }
}
</script>

三、在vuex的actions中接收组件派发过来的事件

export default new Vuex.Store({
  actions: {
    add(ctx){
      console.log(ctx);
      ctx.commit("addCount")
    }
  }
})

四、在actions中通过commit提交一个事件给mutations，在mutations中改变state

export default new Vuex.Store({
  state: {
    count:1
  },
  mutations: {
    addCount(state){
      console.log("state");
      state.count++;
    }
  }
})