VueX学习笔记（mutations）

最新推荐文章于 2023-03-16 21:22:28 发布

GODYEARS

最新推荐文章于 2023-03-16 21:22:28 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/GODYEARS/article/details/107114997

版权

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