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
<template>
<div>
<h2>{{msg}}</h2>
<p>{{count}}</p>
<button @click="$store.dispatch('increament')">count属性增加</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
msg: 'Hello Vuex'
}
},
computed: {
...mapState(['count'])
},
methods: {
}
}
</script>
点击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)
}
}
<button @click="$store.dispatch({type:'increament',amount:20})">count属性增加</button>
<button @click="$store.dispatch('increament',{amount:10})">count属性增加</button>
注意我们正在进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）
在组件中分发 Action
可以在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用
mapActions辅助函数与mapMutations辅助函数使用方法一致
import { mapState, mapActions } from 'vuex'
<button @click="add({type:'increament',amount:20})">count属性增加</button>
<button @click="add({amount:20})">count属性增加</button>
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
<template>
<div>
<h2>{{msg}}</h2>
<p>name是：{{name}}</p>
<p>age是：{{age}}</p>
<button @click="getUserAge">获取信息</button>
</div>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
data() {
return {
msg: 'Hello Vuex'
}
},
computed: {
...mapState(['count']),
...mapGetters(['name', 'age'])
},
methods: {
...mapActions(['getUserAge'])
}
}
</script>
