目标：

掌握模块中 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 dispatchthis.$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>