4. Vuex – Action
Action
Action 用于处理异步任务
如果需要通过异步方式变更状态,必须通过 Action ,而不能使用 Mutation ,但是在 Action 中还是需要通过 Mutation 的方式间接变更状态
const store = new Vuex.Store({
state: {
状态名称:值,
...
},
mutations: {
事件名 (state, [参数...]) {
// 变更状态
state.状态名称
},
...
},
actions: {
异步事件名 (context) {
// 异步操作
...
// 通过 context 调用 mutation 中的事件变更 state 的状态
context.commit('事件名', [参数...])
}
}
})
访问方式一
methods: {
// 触发 action
事件名 () {
this.$store.dispatch('异步事件名', [参数...])
}
}
访问方式二
// 1. 从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'
// 2. 将指定的 actions 函数,映射为当前组件的 methods 函数
methods: {
...mapActions(['异步事件名', ...])
}