vuex中store存储store.commit和store.dispatch的区别及用法

参考：​​​​vuex中store存储store.commit和store.dispatch的区别及用法 - Amerys - 博客园
参考：​​​​

代码演示： 

　　首先，我们假设state有以下数据

//类似组件data, 定义组件公共数据 
 state: {

    book: 'jQuery',

  },

　　然后我们要在组价中修改book, 现在mutations中定义修改的方法

  //类似组件methods, 定义修改state的方法
  mutations: {

    modifyBook(state, data) {
       // 当有提交载荷的时候就修改传入的值，否则默认修改为React
        state.book = data || 'React'; 
    }

  },

　　 组件中调用 ，提醒： mutations 和 actions 都要在组件的methods中使用 ，而state和getters都是在组件中的computed中使用

 methods: {

    //提交modifyBook修改state的book
    modifyBook() {
      this.$store.commit('modifyBook');
    },

    
   /*
     等价于
     使用辅助函数 mapMutations
     ...mapMutations(['modifyBook']),
    */

}

　　　此时定义完成后就可以使用modifyBook方法进行修改state中book的值了。

　　　那么问题来了，那我修改完想做其他事情怎么办呢？

　　　这就要用到 dispatch 来做好一些了。接着往下看！

　　　首先我们知道使用dispatch是在actions中使用的，所以我们要在actions中定义提交mutations的方法

actions: {

    actions1 ({commit}, data) {
        {commit} 等价于 context.commit

        //提交mutations的modifyBook
        (modifyBook   ==>  名称要跟mutations中定义的一模一样)
        commit('modifyBook', data);
    }

}         

  　　　　解答上面为什么写成{commit}?

// 例

 actions: {
    ac1(context, data) {
      console.log('context ==> ', context);

      //context: 对象
      //context.commit: 用来提交当前模块的mutations
      //context.dispatch: 用来提交当前模块的actions
      //context.state: 用于操作当前模块的state
      //context.getters: 用于操作当前模块的getters
      //context.rootState: 用于操作全局的state
      //context.rootGetters: 用于操作全局的getters

    
     // 因为context是个对象，所以我们可以使用es6的解构出commit，所以写成{commit}
    },
}    

　　　　  回到组件中的methods

 methods: {

    //提交modifyBook修改state的book
    modifyBook() {
      this.$store.commit('modifyBook');
    },

    
   /*
     等价于
     使用辅助函数 mapMutations
     ...mapMutations(['modifyBook']),
    */


     //通过actions提交mutations修改state
    action1() {
      //提交actions并且携带一个参数后，返回一个promise, 就可以执行异步操作
      this.$store.dispatch('action1', 'Bootstrap').then(（） => {
        console.log('我被执行了！');
      });
    },


     // 结果： 把state中book原本的值jQuery修改为了Bootstrap，并在控制台输出了我被执行了！
}

　　　到此我们就可以知道 dispatch 在执行了mutations之后还可以做其他事情，比如进行本地存储的一些其他操作。

　　　上述我们可以得出两者的相同之处和区别：

　　　　　　1、commit 和 dispatch 两个方法都是传值给vuex的mutation改变state

　　　　　　2、区别总的来说他们只是存取方式的不同　　　　

 　　　　　　　　// commit: 用来提交当前模块的mutations 

   　　　　　　     // dispatch: 用来提交当前模块的actions(actions可以提交mutations,可以进行异步操作)  

　　　　　　　    // commit 有些做不到的可以用 dispatch 进行提交

　　　　　　3、 mutations修改state, action提交mutations。但是如果修改完还想做其他事情就用actions比较方便(then后执行想要做的事情) ==> this.$store.dispatch().then()

　　　　　　4、同步和异步之别

    　　　　　　　　commit: 同步操作

  　　　　　　　　  存储 this.$store.commit('changeValue',name)

  　　　　　　　　  取值 this.$store.state.changeValue

    

  　　　　　　　　  dispatch: 异步操作

   　　　　　　　　 存储 this.$store.dispatch('getlists',name)

   　　　　　　　　 取值 this.$store.getters.getlists