在Vuex使用 以及 dispatch和commit来调用mutations的区别

 

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？

首先，你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

现在你可以：

store.dispatch('actionA').then(() => {
  // ...
})

在另外一个 action 中也可以：

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

 

转载别人总结：

main.js中

import Vuex from 'vuex'

Vue.use(vuex);

const store = new Vuex.store({

　　state: {

　　　　nickName: "",

　　　　cartCount: 0　　

　　},

　　mutations: {

　　　　updateUserInfo(state,nickName) {

　　　　　　state.nickName = nickName;

　　　　},

　　　　updateCartCount(state,cartCount) {

　　　　　　state.cartCount += cartCount;

　　　　}

　　},

    actions: {
        updateUserInfo(context) {
            context.commit("updateUserInfo");
        },
        updateCartCount(context) {
            context.commit("updateCartCount");
        }
    }

})

new Vue({

　　el: "#app",

　　store,

　　router,

　　template: '<App/>',

　　components: {App}

})

组件中：

methods: {
            increment(){
                this.$store.dispatch("updateUserInfo", 'nick');  //this.$store.commit("increment", 'nick');
            },
            decrement() {
                this.$store.dispatch("updateCartCount", 1);  // this.$store.commit("decrement", 1);
            }
        }

 

区别：

dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('mutations方法名',值)，不能直接修改state，只能通过dispatch触发mutation来对state进行修改

commit：同步操作，写法：this.$store.commit('mutations方法名',值)，直接修改state,并且是修改state的唯一途径

 

疑问？

为什么vuex的state在vue实例中要用commit来改变，直接用赋值改变值会有什么弊端吗？

https://segmentfault.com/q/1010000012841623

总结：

从功能上说没有危害,但是从代码构建角度是没有理解 vuex 这个神器怎么用!!!

使用如vuex,redux本身就是希望基于这样一个数据结构的约定，使得项目代码更加直观和简单