1 Mutations使用
1.1關(guān)于Mutations使用說明:
- 更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation
- mutations非常類似于事件,都有一個(gè)字符串的
事件類型type和一個(gè)回調(diào)函數(shù)handler - 這個(gè)回調(diào)函數(shù)就是修改狀態(tài)的地方,
- store對象提供了一個(gè)
commit方法用來觸發(fā)mutations中的事件, 有點(diǎn)類似于$emit
1.2 定義與使用mutation
1.2.1 定義mutations
let store = new Vuex.Store({
state:{
count: 0
},
// 定義mutations
mutations:{
increment(){
// console.log(this); //this 是store對象
this.state.count++ // 修改狀態(tài)中的數(shù)據(jù)
}
}
})
1.2.2 使用mutations函數(shù)修改數(shù)據(jù)
// 組件中
export default {
// ...
methods:{
increment(){
// 在組件中通過commit觸發(fā)mutations中的函數(shù)
this.$store.commit("increment")
},
}
}
2 關(guān)于mutations函數(shù)的參數(shù)
2.1 mutations參數(shù)說明:
- mutations函數(shù)只接受兩個(gè)參數(shù)
-
mutations函數(shù)可以接受兩個(gè)參數(shù),第一個(gè)參數(shù)就是state狀態(tài), - 第二個(gè)參數(shù)是在通過
commit觸發(fā)mutations函數(shù)時(shí)傳遞的載荷(Payload,其實(shí)就是自定義傳參)
2.2 mutations函數(shù)的第一個(gè)參數(shù)
說明:
- 上一個(gè)示例中我們是采用了
this.state.count++的方式修改數(shù)據(jù)的 - 而
mutations函數(shù)接受的第一個(gè)參數(shù)就是state狀態(tài)對象,因?yàn)槲覀兛梢灾苯油ㄟ^state修改狀態(tài)
示例代碼:
let store = new Vuex.Store({
state:{
count: 0
},
// 定義mutations
mutations:{
increment(state){
// mutations函數(shù)的第一個(gè)參數(shù)就是state對象
// console.log(state);
state.count++
}
}
})
2.3 mutations的第二個(gè)參數(shù)
官網(wǎng)關(guān)于第二個(gè)參數(shù)的說法叫做提交載荷(Payload)
也就是說我們在組件中使用commit觸發(fā)mutations函數(shù)是,還可以傳入額外的參數(shù)
mutations
let store = new Vuex.Store({
state:{
count: 0
},
// 定義mutations
mutations:{
increment(state, num){
// 通過第二個(gè)參數(shù)指定state狀態(tài)修改
state.count += num
}
}
})
組件觸發(fā)
export default {
// ...
methods:{
increment(){
// 觸發(fā)mutations函數(shù)是,指定額外的參數(shù)
this.$store.commit("increment",2)
},
}
}
大多數(shù)情況下,載荷也就是第二個(gè)參數(shù)應(yīng)該是一個(gè)對象,
原因在于對象可以傳遞多個(gè)數(shù)據(jù),如果傳遞普通類型的值只能傳遞一個(gè)
export default {
// ...
methods:{
increment(){
// 觸發(fā)mutations函數(shù)是,指定額外的參數(shù)
this.$store.commit("increment",{
num: 2
})
},
}
}
3. 關(guān)于Mutations的風(fēng)格
提交的另外一種風(fēng)格:直接使用包含 type 屬性的對象：
示例代碼如下
export default {
// ...
methods:{
increment(){
// 觸發(fā)mutations函數(shù)是,指定額外的參數(shù)
this.$store.commit({
type:"increment",
num: 2
})
},
}
}
此時(shí)Mutations函數(shù)不用做任何改變
let store = new Vuex.Store({
state:{
count: 0
},
// 定義mutations
mutations:{
increment(state, payload){
console.log(payload);
/*
{
type:"increment",
num: 2
}
*/
state.count += payload.num
}
}
})
會(huì)自動(dòng)觸發(fā)payload中type屬性對應(yīng)的mutations函數(shù), commit參數(shù)對象整體就是Payload
4. Mutation需要遵循Vue的響應(yīng)規(guī)則
既然 Vuex 的 store 中的狀態(tài)是響應(yīng)式的加矛，那么當(dāng)我們變更狀態(tài)時(shí)冬耿，監(jiān)視狀態(tài)的 Vue 組件也會(huì)自動(dòng)更新.
因此Vuex中的mutation也需要Vue的響應(yīng)規(guī)則
4.1 觸發(fā)響應(yīng)的注意事項(xiàng)
- 最好提前在你的 store 中初始化好所有所需屬性闲擦。
- 使用
Vue.set(obj, 'newProp', 123)方法新增對象的屬性 - 使用新對象替換老對象的方式觸發(fā)響應(yīng)
4.2 示例代碼
利用擴(kuò)展運(yùn)算來創(chuàng)建新對象替換老對象
state.obj = { ...state.obj, newProp: 123 }
5. Mutation必須是一個(gè)同步函數(shù)
5.1 同步函數(shù)說明
- 一條重要的原則就是要記住 mutation 必須是同步函數(shù)
- 如果mutation是一個(gè)異步函數(shù), 異步修改狀態(tài),那么
devtools將不能跟蹤到數(shù)據(jù)的變化 - 因?yàn)?code>devtools 都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照
- 如果是異步函數(shù)將沒發(fā)捕捉到快照信息
5.2 示例代碼
let store = new Vuex.Store({
state:{
count: 0
},
// 定義mutations
mutations:{
increment(state, payload){
//mutation中異步修改狀態(tài)
setTimeout(() => {
state.count += payload.num
},2000)
console.log(this);
})
此時(shí)devtools中沒發(fā)監(jiān)聽狀態(tài)state的變化
