文章目录

1.Vuex(一)–为什么要使用Vuex
2.Vuex(二)–Vue核心概念State
3.Vuex(三)–Vue核心概念Getter
4.Vuex(四)–Vue核心概念Mutation
5.Vuex(五)–Vue核心概念Action
6.Vuex(六)–Vue核心概念Module
Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。

代码实例

store.js

actions: {
    // 商品半价
    disCount (context) {
        context.commit('goodsPriceDiscount');
    },
    // 异步的商品半价
    disCountAsync ({ commit }) {
        setTimeout(() => {
          commit('goodsPriceDiscount');
        }, 2000)
    },
    // 统一修改商品名字
    actionsChangeName (context,payload){
        // 载荷形式
        // context.commit('changeName',payload);

        // 对象形式
        context.commit('changeName',payload.payload);
    }
}

这里有同步也有异步，有载荷也有没有载荷。

Page7.vue

methods: {
  // 同步商品价格减半
  discountPrice: function(){
      this.$store.dispatch('disCount');
  },
  // 异步商品价格减半
  discountPriceAsync: function(){
      this.$store.dispatch('disCountAsync');
  }
}

Page8.vue

methods: {
    // 修改商品名字
    changeGoodsName: function(){
      // 载荷方式
      //this.$store.dispatch('actionsChangeName',this.input_value);

      // 对象方式
      this.$store.dispatch({
          type: 'actionsChangeName',
          payload: this.input_value
      });
    },
}

乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作。
Actions 支持同样的载荷方式和对象方式进行分发。

效果图

总结

在Mutation中我们调用方法使用的是commit，在Action中使用的却是dispatch分发。看过vue1.x文档的，可能对commit和dispatch就有点感觉了，或者你看过socket。
这里主要要明白以下几点：
1.Mutation是同步的，Action是异步的；
2.Mutation是直接变更状态，Action提交的是mutation；
3.Actions和Mutation 都支持载荷方式和对象方式进行分发。

代码下载地址

请点击我！