vuex_Action_05

Action

Action 类似于 mutation，不同在于

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

我们先将count点击加一需求做如下修改

store/index.js

const mutations = {
    [INCREAMENT](state, payLoad) {
        // 变更状态
        state.count++
    }
}

const actions = {
    increament(context) {
        context.commit('INCREAMENT')
    }
}

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

About.vue

点击button count 每次加1

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此我们可以调用 context.commit 提交一个 mutation

const actions = {
    increament(context) {
        context.commit('INCREAMENT')
    }
}

通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了

实践中，我们会经常用到参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候），我们将代码做如下修改

const actions = {
    increament({ commit }) {
        commit('INCREAMENT')
    }
}

效果完全一致

分发 Action

Action 通过 store.dispatch 方法触发

store.dispatch('increment')

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

我们将actions做如下修改

const actions = {
    increament({ commit }) {
        setInterval(()=>{
            commit('INCREAMENT')
        },2000)
        
    }
}

我们现在就可以追踪到每一条分发的数据

Actions 支持同样的载荷方式和对象方式进行分发

const mutations = {
    [INCREAMENT](state, payLoad) {
        // 变更状态
        state.count += payLoad.amount
    }
}

const actions = {
    increament({ commit }, payLoad) {
        setInterval(() => {
            commit('INCREAMENT', payLoad)
        }, 2000)

    }
}

count属性增加
count属性增加

注意我们正在进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）

在组件中分发 Action

可以在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用

mapActions辅助函数与mapMutations辅助函数使用方法一致

import { mapState, mapActions } from 'vuex'

count属性增加
count属性增加

methods: {
    ...mapActions({
        add: 'increament' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
        })
} 

组合 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.index.js

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

const state = {
    name: '',
    age: ''
}
const getters = {
    name: state => state.name,
    age: state => state.age
}

const mutations = {
    getUserName(state, payLoad) {
        // 变更状态
        state.name = payLoad.name
    },
    getUserAge(state, payLoad) {
        console.log(payLoad)
        // 变更状态
        state.age = payLoad.age
    },
}

const actions = {
    getUserName({
        commit
    }) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                commit('getUserName', {
                    name: 'qzy'
                })
                resolve()
            }, 1000)
        })
    },
    getUserAge({
        dispatch,
        commit
    }) {
        dispatch('getUserName').then(() => {
            setTimeout(() => {
                commit('getUserAge', {
                    age: '18'
                })
            }, 1000)
        })
    }
}

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

about.vue