前言說(shuō)明:
大家已經(jīng)知道
vuex提供了mapState和mapGetter方法,方便我們獲取state和getters同樣的
vuex也提供了mapMutations和mapActions方便操作mutations和actions方法需要注意的是
mapState和mapGetter是映射為計(jì)算屬性,獲取數(shù)據(jù)而
mapMutations和mapActions是映射為組件methods方法,修改數(shù)據(jù)的
1. 未使用輔助函數(shù)修改轉(zhuǎn)臺(tái)
1.1 設(shè)置修改狀態(tài)的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:{
// 同步修改狀態(tài)count
increment(state, payload){
state.count++
}
},
actions:{
// 異步修改狀態(tài)count
asyncIncrement(context){
setTimeout(function(){
context.commit({
type:"increment"
})
},1000)
}
},
})
示例說(shuō)明
- 組件中如果通過(guò)
commit觸發(fā)mutation函數(shù),就會(huì)同步更改狀態(tài)count - 組件中如果通過(guò)
dispath異步觸發(fā)action函數(shù), - action會(huì)異步觸發(fā)mutation函數(shù),通過(guò)mutation修改狀態(tài)
1.2 組件中觸發(fā)mutation和action
<template>
<div class="home">
<div class="count">數(shù)字: {{ count }}</div>
<button @click="increment">同步++</button>
<button @click="asyncincrement">異步++</button>
</div>
</template>
<script>
// 獲取輔助函數(shù)
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(){
// 同步,通過(guò)commit觸發(fā)mutation函數(shù)
this.$store.commit({
type:"increment"
})
},
asyncincrement(){
// 異步,通過(guò)dispatch 觸發(fā)action函數(shù)
this.$store.dispatch({
type:"asyncIncrement"
})
}
}
}
</script>
示例說(shuō)明:
- increment是觸發(fā)mutation同步修改狀態(tài)的方法
- asyncIncrement是觸發(fā)action異步修改狀態(tài)的方法
2. 使用mapMutations
說(shuō)明:
- 之前如果我們需要在組件中修改store的狀態(tài)都需要額外定義一個(gè)方法
- 如果這個(gè)方法里有大量的邏輯代碼還好
- 如果這個(gè)方法只是為了觸發(fā)mutation函數(shù),每個(gè)組件都這樣定義就會(huì)比較繁瑣
- 因此vuex提供了
mapMutations輔助函數(shù),可以將mutations函數(shù)映射為組件methods方法
2.1 方法同名
方法同名意思就是組件用來(lái)觸發(fā)mutation函數(shù)的方法和mutation函數(shù)重名
就可以采用字符串?dāng)?shù)組的的方式將mutation函數(shù)通過(guò)函數(shù)名映射methods方法
數(shù)組里的字符串為mutations的函數(shù)名
代碼如下:
// 通過(guò)vuex獲取輔助函數(shù)
import {
mapState, // 獲取state輔助函數(shù)
mapGetters, // 獲取getters 輔助函數(shù)
mapMutations, // 操作mutations輔助函數(shù)
} 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(){
// 異步,通過(guò)dispatch 觸發(fā)action函數(shù)
this.$store.dispatch({
type:"asyncIncrement"
})
}
}
}
2.2 關(guān)于載荷
此時(shí)是將mutation函數(shù)映射為組件methods方法,
如果此時(shí)調(diào)用這個(gè)方法不傳參數(shù)時(shí), 那么將沒(méi)有載荷
例如:
<button @click="increment">同步++</button>
如果在調(diào)用這個(gè)映射方法是傳遞一個(gè)數(shù)據(jù),那么這個(gè)數(shù)據(jù)將成為mutation函數(shù)的載荷
<button @click="increment(10)">同步++</button>
一般來(lái)說(shuō),載荷會(huì)選擇對(duì)象方式傳遞數(shù)據(jù)
<button @click="increment({num:10})">同步++</button>
2.3 方法不同名
也就是需要映射到組件方法中的mutation函數(shù),在組件中已經(jīng)有同名的函數(shù)了
因此在映射時(shí),就需要另外定義方法名
此時(shí)組件中被映射的方法名和mutation函數(shù)名就不同名了
此時(shí)需要選擇對(duì)象的方式映射
代碼如下:
// 通過(guò)vuex獲取輔助函數(shù)
import {
mapState, // 獲取state輔助函數(shù)
mapGetters, // 獲取getters 輔助函數(shù)
mapMutations, // 操作mutations輔助函數(shù)
} 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函數(shù)名
add:'increment'
// 將this.add 映射為 this.$store.commit("increment")
}),
asyncincrement(){
// 異步,通過(guò)dispatch 觸發(fā)action函數(shù)
this.$store.dispatch({
type:"asyncIncrement"
})
}
}
}
3. 使用mapActions
mapActions輔助函數(shù)的使用和mapMutations一樣
同樣也可以傳遞載荷
因此可以將代碼修改如下
// 通過(guò)vuex獲取輔助函數(shù)
import {
mapState, // 獲取state輔助函數(shù)
mapGetters, // 獲取getters 輔助函數(shù)
mapMutations, // 操作mutations輔助函數(shù)
mapActions // 操作actions輔助函數(shù)
} 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函數(shù)名
add:'increment'
// 將this.add 映射為 this.$store.commit("increment")
}),
...mapActions([
"asyncIncrement"
// 將this.asyncIncrement
// 映射為 this.$store.dispatch("asyncIncrement")
])
}
}
