vuex05Action与mapAction

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

1. 引入

import { mapActions } from 'vuex'

2. 使用

 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')`
    })
  }