Action是什么
Action 提交的是 mutation，而不是直接变更状态。
当然Action也获取state，getter
Action 可以包含任意异步操作。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
const store = new Vuex.Store({ state: { name: "old name", age: 18, sex: "女", }, mutations: { changName(state) { state.name = "newName" }, addAge(state, num) { state.age += num }, changSex(state) { state.sex = state.age + "男" } }, actions: { useActionToChangName(context) { // 这里的context也可以写成{commit,state} context.commit('changName') context.commit('addAge',10) } } })
使用Dispatch来触发事件
methods: { changeNameAndAge() { this.$store.dispatch({ type: "useActionToChangName" }); }, 或者 changeNameAndAge() { this.$store.dispatch ("useActionToChangName" ); }, }
mapActions
- 引入
import { mapActions } from 'vuex'
- 使用
methods: { ...mapActions([ 'useActionToChangName', // 将 `this.useActionToChangName()` 映射为 `this.$store.dispatch('useActionToChangName')` // `mapActions` 也支持载荷： 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)` ]), ...mapActions({ add: 'useActionToChangName' // 将 `this.add()` 映射为 `this.$store.dispatch('useActionToChangName')` }) }
