VUX

1.mapState

2.mapGetters

3.

4.

当你的操作行为中含有异步操作，比如向后台发送请求获取数据，就需要使用action的dispatch去完成。
其他使用commit即可。

举个例子：

const store = new Vuex.Store({
  state: {
    count: 10,
    numb: 10086
  },
  getters: {
    add: (state) => {
      return state.count;
    },
  },
  mutations: {
    increment(state,val) {
      if(val){
        state.count += val;
      }else{
        state.count += 2;
      }

    },
  },
  actions: {
    actionA({dispatch, commit}) {
      return commit('add');
    },
    increment({commit}) {
      return commit('increment')
    }
  }
});

/* eslint-disable no-new */
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app-box')

使用：

import {mapState,mapActions,mapMutations,mapGetters} from 'vuex'

 methods:{
    ...mapMutations({addNumber:'increment'}),
    increment(){
      this.$store.dispatch('increment');
    }
  },
  computed: {
    ...mapState({count:'numb'}),
    ...mapGetters(['add'])
  },

 <div class="hello">
      <button @click="increment">加+2{{count}}</button>
    </div>
    <div class="hello">
      <button @click="addNumber(5)">加+5{{count}}</button>
    </div>
    <div class="hello">
      <button >{{add}}</button>
    </div>

点击+2:store的count+=2

点击+5:store的count+=5

...mapState({count:'numb'}),
意思是this.count=this.$store.state.numb

...mapMutations({addNumber:'increment'}),
意思是之行this的addNumber函数的时候，执行this.$store的mutations的increment的函数