vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别

dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)
commit：同步操作，写法：this.$store.commit('mutations方法名',值)
1. 在Vue组件中提交 mutation

\src\store\index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

// Vuex 的状态存储是响应式的

// 创建一个Vuex.Store的实例
const store = new Vuex.Store({

  // 存储状态
  state: {
    count: 0
  },

  // mutation中最多有两个参数，第一个参数为state，要传多个参数，可传递一个对象
  mutations: {
    // 类型为 increment 的 mutation
    increment (state) {
      // 变更状态
      state.count++;
    },
    // 类型为 reduce 的 mutation
    reduce (state, n) {
      // 变更状态
      state.count -= n;
    },
    // 类型为 change 的 mutation,第二个参数为一个对象
    change (state, payload) {
      // 变更状态
      state.count = state.count + payload.a + payload.b;
    }
  }
});

export default store;

routertest\testState.vue

<template>
  <div class="hello">
    <button @click="add">加1</button>
    <button @click="reduce">减2</button>
    <button @click="change">change</button>

    <h1>{{ count }}</h1>
  </div>
</template>

<script>
  import { mapState } from 'vuex';

  export default {
    data () {
      return {};
    },
    computed: {
      ...mapState(['count'])
    },

    methods: {
      add () {
        // 以相应的 type 调用 store.commit 方法
        this.$store.commit('increment');
        console.log(this.$store.state.count);
      },
      reduce () {
        // 可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
        this.$store.commit('reduce', 2);
      },
      change () {
        // 注意：只可以向 store.commit 传入额外的一个参数
        // 如果要传多个参数，就传一个对象作为参数，即大多数情况下，载荷应是一个对象
        this.$store.commit('change', {a: 4, b: 6});
      }
    }

  };
</script>

效果：

2. 对象风格提交mutation

提交 mutation 的另一种方式是直接使用包含 type 属性的对象
当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数

<template>
  <div class="hello">
    <button @click="add">加1</button>
    <button @click="reduce">减2</button>
    <button @click="change">change</button>
 
    <h1>{{ count }}</h1>
  </div>
</template>
 
<script>
import { mapState } from 'vuex';
 
export default {
  data () {
    return {};
  },
  computed: {
    ...mapState(['count'])
  },
 
  methods: {
    add () {
      // 以相应的 type 调用 store.commit 方法
      this.$store.commit({
        type: 'increment'
      });
    },
    reduce () {
      // 这种没法改用对象风格提交mutation
      // 因为第二个参数必须是对象才能使用对象风格提交mutation
      this.$store.commit('reduce', 2);
    },
    change () {
      this.$store.commit({
        type: 'change',
        a: 4,
        b: 6
      });
    }
  }
 
};
</script>

 3. 展开运算符+mapMutations辅助函数（...mapMutations）

<template>
  <div class="hello">
    <button @click="increment">加1</button>
    <button @click="reduce(2)">减2</button>
    <button @click="change({a:4, b:6})">change</button>
 
    <h1>{{ count }}</h1>
  </div>
</template>
 
<script>
// 导入mapState和mapMutations函数
import { mapState, mapMutations } from 'vuex';
 
export default {
  data () {
    return {};
  },
  computed: {
    ...mapState(['count'])
  },
 
  methods: {
    // 展开运算符+mapMutations辅助函数
    ...mapMutations(['increment', 'reduce', 'change'])
  }
};
</script>

4. Action 异步变更状态

// 创建一个Vuex.Store的实例
const store = new Vuex.Store({
 
  state: {
    count: 0
  },
 
  mutations: {
    increment (state) {
      state.count++;
    }
  },
 
  // 异步变更状态，Action 提交的也是 mutation
  // Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
  // Action调用 context.commit 提交一个 mutation
  // Action通过 context.state 和 context.getters 获取 state 和 getters。
  actions: {
    increment (context) {
      context.commit('increment');
    }
  }
});

在组件中使用actions，在组件中使用actions和在组建中使用mutations类似区别就是，mutations使用this.$store.commit('mutation方法名')提交mutation；actions使用this.$store.dispatch('action方法名')分发action

<template>
  <div>
    <button @click="increment">加1</button>

    <h1>{{ count }}</h1>

  </div>
</template>

<script>
  import { mapState } from 'vuex';
  export default {
    data () {
      return {};
    },
    computed: {
      ...mapState(['count'])
    },
    methods: {
      increment () {
        return this.$store.dispatch('increment');
      }
    }
  };
</script>

5. 展开运算符+mapActions 辅助函数（...mapActions ）

<template>
  <div>
    <button @click="increment">加1</button>

    <h1>{{ count }}</h1>

  </div>
</template>

<script>
  // 导入mapActions函数
  import { mapState, mapActions } from 'vuex';

  export default {
    data () {
      return {};
    },
    computed: {
      ...mapState(['count'])
    },
    methods: {
      // 展开运算符+mapActions辅助函数
      ...mapActions(['increment'])
    }
  };
</script>