前言说明:
-
大家已经知道
vuex提供了mapState和mapGetter方法,方便我们获取state和getters -
同样的
vuex也提供了mapMutations和mapActions方便操作mutations和actions方法 -
需要注意的是
mapState和mapGetter是映射为计算属性,获取数据 -
而
mapMutations和mapActions是映射为组件methods方法,修改数据的
1. 未使用辅助函数修改转台
1.1 设置修改状态的mutations和actions
代码如下
let store = new Vuex.Store({
state:{
count:0,
user:{
name:"张三",
age:20
},
fruits:[{
name:"苹果",
price: 22
},{
name:"梨子",
price: 25
},{
name:"西瓜",
price: 16
},{
name:"香蕉",
price: 18
}]
},
getters:{
filterFruits(state){
return state.fruits.filter(fruit => fruit.price > 20)
}
},
// 定义mutations
mutations:{
// 同步修改状态count
increment(state, payload){
state.count++
}
},
actions:{
// 异步修改状态count
asyncIncrement(context){
setTimeout(function(){
context.commit({
type:"increment"
})
},1000)
}
},
})
示例说明
- 组件中如果通过
commit触发mutation函数,就会同步更改状态count - 组件中如果通过
dispath异步触发action函数, - action会异步触发mutation函数,通过mutation修改状态
1.2 组件中触发mutation和action
<template>
<div class="home">
<div class="count">数字: {{ count }}</div>
<button @click="increment">同步++</button>
<button @click="asyncincrement">异步++</button>
</div>
</template>
<script>
// 获取辅助函数
import {mapState,mapGetters} from 'vuex'
export default {
name: 'Home',
data(){
return {
// count: 10
price: 10
}
},
computed:{
computePrice(){
return this.price * 2
},
... mapState([
"count",
"user",
"fruits"
]),
...mapGetters([
"filterFruits"
])
},
methods:{
increment(){
// 同步,通过commit触发mutation函数
this.$store.commit({
type:"increment"
})
},
asyncincrement(){
// 异步,通过dispatch 触发action函数
this.$store.dispatch({
type:"asyncIncrement"
})
}
}
}
</script>
示例说明:
- increment是触发mutation同步修改状态的方法
- asyncIncrement是触发action异步修改状态的方法
2. 使用mapMutations
说明:
- 之前如果我们需要在组件中修改store的状态都需要额外定义一个方法
- 如果这个方法里有大量的逻辑代码还好
- 如果这个方法只是为了触发mutation函数,每个组件都这样定义就会比较繁琐
- 因此vuex提供了
mapMutations辅助函数,可以将mutations函数映射为组件methods方法
2.1 方法同名
方法同名意思就是组件用来触发mutation函数的方法和mutation函数重名
就可以采用字符串数组的的方式将mutation函数通过函数名映射methods方法
数组里的字符串为mutations的函数名
代码如下:
// 通过vuex获取辅助函数
import {
mapState, // 获取state辅助函数
mapGetters, // 获取getters 辅助函数
mapMutations, // 操作mutations辅助函数
} from 'vuex'
export default {
name: 'Home',
data(){
return {
// count: 10
price: 10
}
},
computed:{
computePrice(){
return this.price * 2
},
... mapState([
"count",
"user",
"fruits"
]),
...mapGetters([
"filterFruits"
])
},
methods:{
...mapMutations([
'increment'
// 将this.increment 映射为 this.$store.commit("increment")
]),
asyncincrement(){
// 异步,通过dispatch 触发action函数
this.$store.dispatch({
type:"asyncIncrement"
})
}
}
}
2.2 关于载荷
此时是将mutation函数映射为组件methods方法,
如果此时调用这个方法不传参数时, 那么将没有载荷
例如:
<button @click="increment">同步++</button>
如果在调用这个映射方法是传递一个数据,那么这个数据将成为mutation函数的载荷
<button @click="increment(10)">同步++</button>
一般来说,载荷会选择对象方式传递数据
<button @click="increment({num:10})">同步++</button>
2.3 方法不同名
也就是需要映射到组件方法中的mutation函数,在组件中已经有同名的函数了
因此在映射时,就需要另外定义方法名
此时组件中被映射的方法名和mutation函数名就不同名了
此时需要选择对象的方式映射
代码如下:
// 通过vuex获取辅助函数
import {
mapState, // 获取state辅助函数
mapGetters, // 获取getters 辅助函数
mapMutations, // 操作mutations辅助函数
} from 'vuex'
export default {
name: 'Home',
data(){
return {
// count: 10
price: 10
}
},
computed:{
computePrice(){
return this.price * 2
},
... mapState([
"count",
"user",
"fruits"
]),
...mapGetters([
"filterFruits"
])
},
methods:{
...mapMutations({
// 方法名: mutation函数名
add:'increment'
// 将this.add 映射为 this.$store.commit("increment")
}),
asyncincrement(){
// 异步,通过dispatch 触发action函数
this.$store.dispatch({
type:"asyncIncrement"
})
}
}
}
3. 使用mapActions
mapActions辅助函数的使用和mapMutations一样
同样也可以传递载荷
因此可以将代码修改如下
// 通过vuex获取辅助函数
import {
mapState, // 获取state辅助函数
mapGetters, // 获取getters 辅助函数
mapMutations, // 操作mutations辅助函数
mapActions // 操作actions辅助函数
} from 'vuex'
export default {
name: 'Home',
data(){
return {
// count: 10
price: 10
}
},
computed:{
computePrice(){
return this.price * 2
},
... mapState([
"count",
"user",
"fruits"
]),
...mapGetters([
"filterFruits"
])
},
methods:{
...mapMutations({
// 方法名: mutation函数名
add:'increment'
// 将this.add 映射为 this.$store.commit("increment")
}),
...mapActions([
"asyncIncrement"
// 将this.asyncIncrement
// 映射为 this.$store.dispatch("asyncIncrement")
])
}
}
网友评论