VueX学习笔记（mutations）_vuex typora笔记-CSDN博客

本文详细介绍了在 Vue.js 中使用 Vuex 的 mutations 进行状态管理的基本方法，包括如何定义和调用 mutations，以及如何传递参数。同时，探讨了不同的 mutations 提交风格，如普通提交和特殊封装提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mutations基本应用

state:{
    counter:100
},
mutations:{
    incrementCounter(state) {
        state.counter++
    }
}

在stor/index.js中定义好mutations的一个方法

```
<button @click="plus">+</button>
```

methods:{
    plus() {
        this.$store.commit('increment')
    }
}

需要commit

mutations传参

mutations:{
    incrementStudent(state, stu) {
        state.students.push(stu)
    }
}

<button @click="addStudent">+学生</button>

methods:{
    addStudent() {
        const stu = {
        name: 'jiayi',
        id:114,
        age:22,
    }
        this.$store.commit('incrementStudent', stu)
  }
}

mutations提交风格

普通的提交风格

this.$store.commit('incrementStudent', stu)

特殊的提交封装
```
this.$store.commit({
	type: 'incrementStudent',
	payload
})
```
mutations中提取时，payload是作为一个对象其中会含有stu这个对象

mutations中的incrementStudent方法如下：

incrementStudent(state, payload) {
	state.students.push(payload.stu)
}

getters

mutations响应规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NX1V0UqK-1593780433959)(C:\Users\17840\AppData\Roaming\Typora\typora-user-images\image-20200624203515603.png)]