使用 action 异步的修改 state 数据

使用 action 异步的修改 state 数据

首先需要知道，mutation 里面只允许同步的去修改 state 数据。（虽然在mutation中可以异步的去修改state数据不会报错，但是会导致时间旅行等机制没有效果）

如果异步的修改的化，有两个大方案

1. 不涉及action。在组件上异步代码走完之后再去调用 mutation
2. 使用 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)
    }
  }
}