目标：

掌握模块中 action 的调用语法 (同理 - 直接类比 mutation 即可)

注意：

默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

调用语法：

1. 直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)
2. 通过 mapActions 映射
   1. 默认根级别的映射 mapActions([ ‘xxx’ ])
   2. 子模块的映射 mapActions(‘模块名’, [‘xxx’]) - 需要开启命名空间

代码实现

需求：

modules/user.js

const actions = {
  setUserSecond (context, newUserInfo) {
    // 将异步在action中进行封装
    setTimeout(() => {
      // 调用mutation   context上下文，默认提交的就是自己模块的action和mutation，基于当前的模块环境，指向不同的空间
      context.commit('setUser', newUserInfo)
    }, 1000)
  }
}

Son1.vue 直接通过store调用

<button @click="updateUser2">一秒后更新信息</button>

<script>
methods:{
    updateUser2 () {
      // 调用action dispatch
      this.$store.dispatch('user/setUserSecond', {
        name: 'xiaohong',
        age: 28
      })
    },
}
</script>

Son2.vue mapActions映射

<button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button>

<script>
methods:{
  ...mapActions('user', ['setUserSecond'])
}
</script>