Mutations修改狀態(tài)的值
Vue的視圖是由數(shù)據(jù)驅(qū)動(dòng)的，也就是說state里面的數(shù)據(jù)是動(dòng)態(tài)變化的，那么怎么改變呢妄呕，切記在Vuex中store數(shù)據(jù)改變的唯一方法就是mutation潜慎！什么意思？也就算說我們不能夠直接通過一個(gè)事件或方法去修改state中的狀態(tài)司抱，必須將事件提交（commit）給mutation筐眷，并且事件接收state作為第一個(gè)參數(shù)。
通俗的理解习柠，mutations里面裝著一些改變數(shù)據(jù)方法的集合匀谣，這是Veux設(shè)計(jì)很重要的一點(diǎn)，就是把處理數(shù)據(jù)邏輯方法全部放在mutations里面资溃，使得數(shù)據(jù)和視圖分離武翎。
每個(gè) mutation 都有一個(gè)字符串的事件類型 (type) 和 一個(gè)回調(diào)函數(shù) (handler)。事件類型就是通過$store.commit()提交的事件溶锭，比如：$store.commit('add')宝恶，回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，它作為store中的mutations對(duì)象里的一個(gè)屬性而存在趴捅。
下面通過例子來一看究竟：
通過$store.commit()的方式提交
1垫毙、在組件中
<div>
<h1>{{ msg }}</h1>
<div>{{ count }}</div>
<!--調(diào)用type 觸發(fā)回調(diào)-->
<button @click = "$store.commit('add')">+</button>
<button @click = "$store.commit('reduce')">-</button>
</div>
2、在store.js中定義一個(gè)常量mutations對(duì)象拱绑。
const mutations = {
add(state){ //注冊(cè)事件 type:add 回調(diào)第一個(gè)參數(shù)是state
state.count++
},
reduce(state){
state.count--
}
}
然后將mutations和state導(dǎo)出去
export default new Vuex.Store({
state,
mutations
})
3露久、組件中引入store
import store from '@/vuex/store'
export default {
data(){
return {
msg: "加減運(yùn)算"
}
},
store,
computed:mapState([
'count'
])
}
傳值（ 提交載荷（Payload））
剛才只是一個(gè)簡(jiǎn)單的修改state中的屬性，而在實(shí)際項(xiàng)目中往往會(huì)有值傳遞欺栗。
$store.commit()接收額外的參數(shù)毫痕，稱之為mutations的載荷征峦。
1、比如我們?cè)诩訙p時(shí)分別傳入不同的參數(shù)
<button @click = "$store.commit('add', 20)">+</button>
<button @click = "$store.commit('reduce', 10)">-</button>
2消请、在mutations中接收參數(shù)
const mutations = {
add(state, val){
state.count += val
},
reduce(state, val){
state.count -= val
}
}
在大多數(shù)情況下栏笆，載荷應(yīng)該是一個(gè)對(duì)象，這樣可以包含多個(gè)字段并且記錄的 mutation 會(huì)更易讀臊泰。
<!--需要注意的是蛉加，對(duì)象中的屬性一定要加引號(hào)-->
<button @click = "$store.commit('add', { 'amount': 20 } )">+</button>
<button @click = "$store.commit('reduce', { 'amount': 10 } )">-</button>
const mutations = {
add(state, val){
state.count += val.amount
},
reduce(state, val){
state.count -= val.amount
}
}
對(duì)象風(fēng)格的提交方式
還有一種提交方式是對(duì)象風(fēng)格的提交，也就是提交mutation的時(shí)候直接使用type屬性的對(duì)象缸逃。
上代碼吧：
<button @click = "$store.commit({type: 'add', 'num': 20})">+</button>
<button @click = "$store.commit({type: 'reduce', 'num': 10})">-</button>
同理针饥，在實(shí)際開發(fā)中，如果一個(gè)組件有多個(gè)事件需频，在模板中通過$store.commit()這種方式來提交mutation和傳值丁眼，肯定會(huì)造成代碼冗余且不利于維護(hù)≌蜒常可以通過mapMutations輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用苞七。
在組件中提交Mutations
1、首先引入mapMutations
import { mapState, mapMutations } from 'vuex'
2挪丢、添加methods屬性蹂风，并加入mapMutations
export default {
data() {
return {
msg: "加減運(yùn)算"
}
},
store,
computed: mapState([
'count'
]),
// methods: mapMutations([
// 'add', 'reduce'
// ]),
//或者
methods: {
//如果組件中事件的名稱和mutations中方法的名稱相同，可以傳一個(gè)字符串?dāng)?shù)組
...mapMutations([
'add' //映射 this.add() 為 this.$store.commit('add')
]),
//組件中的事件名和mutations中的方法名不一樣乾蓬，傳入對(duì)象
...mapMutations({
reduces: 'reduce' //映射 $this.reduces 為 this.store.commit('reduce')
})
}
}
Mutations必須是同步函數(shù)
一條重要的原則是Mutations必須是同步函數(shù)惠啄。
store.commit('add')
//任何由add事件改變的狀態(tài)都應(yīng)該在此刻完成。
