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