Vue | Vuex集合

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    state:{
      count: 1,
    },
    getters: {
      getCount:function(state){
          console.log('get')
          return state.count;
      }
    },
    mutations:{
      add:function(state,count){
         count = parseInt(count)
          state.count +=count;
      },
      sub:function(state,count){
            state.count -= count
            console.log(state.count)
      }
    },
    actions:{
      addFun:function(context,count){
          context.commit('add',count)
      },
      subFun:function(context,count) {
          context.commit('sub',count)
      }

    }
});

export default store

这是最常见的一个计数器的demo。调用时：

1. this.$store.dispatch(addFun')调用action
2. action中调用mutations
3. mutations调用state数据。

其实也可以直接调用mutations，但一般的建议是用action来触发mutations，网上很多文章说action中可以使用异步操作，mutations只能同步操作，其实不然，我经过测试发现mutations也是可以使用异步的。

关于这个问题，vue作者给出了具体解释：