vuex中commit与dispatch的区别

今天查看vue中this对象，发现$store下边有两个方法，commit和dispatch，commit是调用mutation的，但是dispatch让我想到了react中react-redux也有这个方法，对这两个方法的区别有点迷糊，所以仔细阅读了一遍官方文档才搞明白他们俩的区别。

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

Vue.use(Vuex)

const state = {
    count:0
}

const mutations = {
    increment(state){
        state.count++
    },
    decrement(state){
        state.count--
    }
}

const actions = {
    increment({commit}){
        commit('increment')
    },
    decrement({commit}){
        commit('decrement')
    }
}

const getters = {
     count:(state,getters)=>{
         return state.count+10
     }
}

const modules = {
    login: loginModule,
    index:indexModule
}

const store = new Vuex.Store({state,mutations,actions,getters,modules})
export default store

state：需要管理的全局data
mutations：定义改变全局data的方法，Mutation 必须是同步函数
actions：同mutation类似，也是定义修改全局data的方法，不同的是可以进行异步操作
getters：可以理解成vuex的computed计算属性，state发生变化他也会同步发生变化
modules:可以对vuex的state进行分模块管理
组件内部

<script>
import axios from '../utils/axios'
export default {
    data(){
        return {
            count:this.$store.state.count,
            count2:this.$store.getters.count
        }
    },
    mounted(){
        console.log(this)
        axios.request()
    },
    methods:{
        countChange(){
            this.$store.commit("increment")
            this.$store.dispatch("increment")
            this.count = this.$store.state.count
            this.count2 = this.$store.getters.count
        }
    }
}
</script>

this.$store.commit("increment")调用的是vuex中mutation中的increment函数，而this.$store.dispatch("increment")调用的是vuex中actions中的increment函数，mutation有同步限制，就是说mutation中不能执行异步操作，否则vuex无法识别什么时候修改state，state修改就会失败；actions中可以调用mutation中的函数，也可以执行异步操作，所以有异步操作要在actions中写代码，然后在执行commit方法调用mutation中的函数修改state；如果把actions中的increment命名改成incrementAction的话，在调用this.$store.dispatch("increment")就会报错，告诉你找不到该方法，应该调用this.$store.dispatch("incrementAction")