1 核心概念 - actions
state是存放数据的,mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化),
actions则负责进行异步操作
说明:mutations必须是同步的
需求: 一秒钟之后, 要给一个数 去修改state
1.定义actions
mutations: { changeCount (state, newCount) { state.count = newCount } } actions: { setAsyncCount (context, num) { // 一秒后, 给一个数, 去修改 num setTimeout(() => { context.commit('changeCount', num) }, 1000) } },
2.组件中通过dispatch调用
setAsyncCount () { this.$store.dispatch('setAsyncCount', 666) }
2 辅助函数 -mapActions
1.目标:掌握辅助函数 mapActions,映射方法
mapActions 是把位于 actions中的方法提取了出来,映射到组件methods中
Son2.vue
import { mapActions } from 'vuex' methods: { ...mapActions(['changeCountAction']) } //mapActions映射的代码 本质上是以下代码的写法 //methods: { // changeCountAction (n) { // this.$store.dispatch('changeCountAction', n) // }, //}
直接通过 this.方法 就可以调用
<button @click="changeCountAction(200)">+异步</button>