VueX学习笔记（mutations）

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)]

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