使用 action 异步的修改 state 数据
首先需要知道,mutation 里面只允许同步的去修改 state 数据。(虽然在mutation中可以异步的去修改state数据不会报错,但是会导致时间旅行等机制没有效果)
如果异步的修改的化,有两个大方案
- 不涉及action。在组件上异步代码走完之后再去调用 mutation
- 使用 action
使用 action。首先需要在 actions 选项中定义 action 函数
注意:action 中不能直接去修改 state,要修改是通过 context.commit() 去执行某个 mutation 来修改
方案一、直接使用 vuex 绑定到 vue 原型上的 $store 这个对象的 dispatch() 方法
// dispatch 语法
// actionName - 要调用action的名字
// payload - 要传递这个 action 的参数
this.$store.dispatch(actionName, payload)
方案二、在组件中先定义一个函数,函数名跟后续要调用的 action 名字保持一致,函数内部使用方案一
方案三、使用 mapActions 这个辅助函数
// mapActions 的语法
// 接收一个数组作为参数,数组中的每一项是一个 action 的名字
mapActions([action1, action2, action3])
示例代码
{
methods: mapActions(["SYNCSETCURCITY"])
}
转换之后如下所示
{
methods: {
SYNCSETCURCITY(payload) {
this.$store.dispatch('SYNCSETCURCITY', payload)
}
}
}