vuex使用mutations處理異步請(qǐng)求的問(wèn)題，在chrome插件中查看state的狀態(tài)與頁(yè)面顯示的不一樣

demo github地址

vuex處理異部事件要使用actions,同步使用mutations;
在使用chrome的vue的插件中可以查看state值的狀態(tài)；
發(fā)現(xiàn)使用actions數(shù)據(jù)與頁(yè)面是對(duì)應(yīng)的；mutations總是顯示上一次操作的最后結(jié)果；
但是在界面顯示效果中，兩者沒(méi)有任何區(qū)別；為什么會(huì)這樣？什么情況下可以看出兩者的區(qū)別？

test.vue

<template>
  <div>
    <div style="border: 1px solid #ddd;padding: 10px;margin-bottom: 20px;">
      <h2>mutations處理異步操作</h2>
      <button type="text" @click="reduce(10)">-</button>
      <span>{{count}}</span>
      <button type="text" @click="addIncrement(10)">+</button>
     <p> 限制數(shù)字： {{limitNum}}</p>
    </div>

    <div style="border: 1px solid #ddd;padding: 10px;margin-bottom: 20px;">
      <h2>actions處理異步操作</h2>
      <button type="text" @click="reduceAction(10)">-</button>
      <span>{{count2}}</span>
      <button type="text" @click="addAction(10)">+</button>
      <p> 限制數(shù)字： {{limitNum2}}</p>
    </div>

  </div>
</template>

<script>
  import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
export default {
  name: 'app',
  data () {
    return {
    }
  },
  computed:{
    ...mapState(["count","count2"]),
    ...mapGetters(["limitNum","limitNum2"])
  },
  methods:{
    ...mapMutations(["addIncrement","reduce"]),  // 同步
    ...mapActions(["addAction","reduceAction"])  //異步
  },
  created:function(){
  }
}
</script>

<style>
</style>

store/index.js 中的內(nèi)容

/**
 * Created by Administrator on 2018/1/19.
 */
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex);

var store =new Vuex.Store({  //注意這里的Store是大寫(xiě)
  state:{
    count:100,
    count2:100
  },
  mutations:{
    addIncrement:function(state,n){
      setTimeout(function(){
        state.count+=n;
      },600)
    },
    reduce:function(state,n){
      setTimeout(function(){
        state.count-=n;
      },600)
    },
    addIncrement2:function(state,n){
        state.count2+=n;
    },
    reduce2:function(state,n){
        state.count2-=n;
    },
  },
  actions:{
    addAction:function(context,n){
      setTimeout(function(){
        context.commit("addIncrement2",n);
      },600)
    },
    reduceAction:function(context,n){
      setTimeout(function(){
        context.commit("reduce2",n);
      },600)
    },
  },
  getters:{
    limitNum:function(state){
      var a=state.count>120?120:state.count;
      return a;
    },
    limitNum2:function(state){
      var a=state.count2>120?120:state.count2;
      return a;
    }
  }
})

export default store