这里主要包括两大内容:mutations传递的参数和mutations提交风格
一、基本结构
1.作用
Vuex的store状态的更新唯一方式:提交Mutation。也就是我们前面提到过的,必须经过 state --> Vuex --> Action --> Mutations 这个路径修改state的状态。
2.组成
mutations主要由两部分组成:事件类型和回调函数,具体的可以参考下面的代码:
const store = new Vuex.Store({
state:{
counter:100,
},
mutations:{
increase(state){
state.counter++
},
decrease(state){
state.counter--
}
}
})
在上述的代码中,increase和decrease是事件类型,(state){state.counter++} 这部分是回调函数。
3.定义的方式
定义的方式很简单,就是事件类型+回调函数,具体查看下面的代码:
const store = new Vuex.Store({
state:{
counter:100,
},
mutations:{
increase(state){
state.counter++
}
}
})
上述代码中,定义的事件类型为increate,当执行该事件类型时,就会调用回调函数,执行对counter++的操作。
此外,如果想要通过mutations更新某些数据,可以使用commit方法,commit方法中传入的数据是事件类型。具体代码如下:
const store = new Vuex.Store({
state:{
counter:100,
},
mutations:{
increase:function(){
this.$store.commit('increate')
}
}
})
以上是对mutation的基本回顾,接下来进入今天的正题:传递参数
二、传递参数
1.传递变量
前面我们已经会通过调用increate函数对counter进行简单的加1操作,如果这个时候我们不再对counter进行简单的加1操作,而是加5甚至是加10,这个时候该怎么办呢?
很简单,只需要传递多一个参数即可,比如:
const store = new Vuex.Store({
state:{
counter:100,
},
mutations:{
increateCounter(state,count){
state.counter += count
}
}
})
在mutation中,声明increateCounter事件类型,然后回调函数主要是对counter做加上count的操作。在App.vue页面中调用该方法的代码如下:
<template>
<div id="app">
<h2>{{message}}</h2>
<h2>{{$store.state.counter}}</h2>
<button @click="addcounter" >+</button>
<button @click="deccounter" >-</button>
<button @click="addCount(5)" >+5</button>
<hellovue></hellovue>
</div>
</template>
<script>
import hellovue from './components/HelloWorld.vue'
export default {
name: 'App',
components:{
hellovue
},
methods:{
addcounter(){
this.$store.commit('increase')
},
deccounter(){
this.$store.commit('decrease')
},
addCount(count){
this.$store.commit('increateCounter',count)
}
},
data(){
return {
message:"我是组件1",
}
}
}
</script>
在methods方法中,对addCount点击事件的处理,主要是通过commit方法调用了Vuex中mutation声明的increateCounter,然后传递count作为参数,在本例中,参数count = 5,所以点击一次,counter的数值就会增加5,具体效果图如下所示:
如果我们传递的参数不再是变量这么简单,而是传递一个对象,又该怎么办呢?很简单,我们传递一个对象就可以啦。
2.传递对象
做法很简单,具体代码如下:
const store = new Vuex.Store({
state:{
counter:100,
},
mutations:{
increateStu(state,stu){
state.student.push(stu)
}
}
})
上述代码中,将stu参数添加到student对象中,在App.vue中调用该方法的代码如下:
<template>
<div id="app">
<h2>{{message}}</h2>
<button @click="addStu">添加学生</button>
<hellovue></hellovue>
</div>
</template>
<script>
import hellovue from './components/HelloWorld.vue'
export default {
name: 'App',
components:{
hellovue
},
methods:{
addStu(){
const stu = {id:500,name:'xiaoqi',age:30}
this.$store.commit('increateStu',stu)
}
},
data(){
return {
message:"我是组件1",
}
}
}
</script>
当点击了“添加学生”按钮之后,就会将stu对象中的数据添加到student对象中,具体效果如下:
以上便是mutation中有关传递参数的内容。
三、提交风格
1.commit
这是最简单的提交方式,在上面的例子中,小编也已经演示过了,这里就不再重复
2.type
这种风格的提交就是commit中提交的是一个对象,然后在type中传入具体要传入的数据,比如:
//App.vue
addCount(count){
// 第一种提风格:commit
this.$store.commit('increateCounter',count)
//第二种提交风格
this.$store.commit({
type:'increateCounter',
count
})
}
//index.js
const store = new Vuex.Store({
state:{
counter:100,
},
mutations:{
// 提交风格
increateCounter(state,payload){
state.counter += payload.count
}
}
})
上述代码中,commit提交的是一个对象,然后在对象中有一个type类型,type后面填写事件类型,比如本例子中的increateCounter。
值得注意的是参数问题。在第一种提交风格中,count就是一个简简单单的数值,但是在第二中风格中,count是一个对象,所以我们需要通过 对象.属性名来获取具体的变量,比如本例中的 payload.count 就是获得count变量
以上便是有关于mutation中的两种提提交风格。
❤今天的内容就到这里啦~谢谢大家 记得给小编点赞哟❤