vue-clie学习-Mutations 状态提交

Mutations 提交

状态选项可以改变状态的值

//About.vue
<button @click="increment">全局计数</button>
methods : {
    increment() {
        this.$store.commit('increment')
    }
}
//修改状态 store/index.js
mutations: {
    increment(state) {
        state.count++
    },
},

提交载荷(payload)
如果想要提交额外参数，可以通过参数二进行传递

methods : {
    setAge(e) {
        this.$store.commit('setAge', e.target.value)
    }
}
mutations: {
    setAge(state, value) {
        state.age = value
    }
},

提交载荷(payload)，在大多数情况下传递一个对象，可以包含多个字段

this.$store.commit('setAge', e)

setAge(state, payload) {
    state.age = payload.target.value
}

辅组函数 mapMutations，用法也比较简单

import { mapMutations } from 'vuex'

methods : {
    // increment() {
    // this.$store.commit('increment')
    // }
    ...mapMutations(['increment']) //支持荷载，会自动传参
}
//如果名称不一样：比如触发为 add()，那么写法如下
...mapMutations({
    add : 'increment'
})

PS:Mutations 必须是同步函数，否则无法追踪数据