Vuex简单入门5：actions

Action 类似于 mutation，不同在于：

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

1. 在store.js创建actions , 可以在中间调用 mutation中的方法 ，将actions加入store

const actions = {
  addAction (context) {
    context.commit('add', 33)
  },
  reduceAction ({commit}) {
    commit('reduce', 11)
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

2.  count.vue中

import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'

methods: {
  ...mapMutations(['add', 'reduce']),
  ...mapActions(['addAction', 'reduceAction'])
},

这样就可以用了，但是感觉跟mutations没区别对吧，下面我们就写个异步的来看一下差别。

在actions中的addAction方法中添加一个定时器

addAction (context) {
  context.commit('add', 33)
  setTimeout(() => { context.commit('reduce') }, 5000)
  console.log('我比reduce快')
},

点一下＋ 看到控制台是先输出 '我比reduce快' ，再然后count才reduce的。可以看出是异步执行。