Mutation
Vuex 通過commit一個(gè)mutation來對(duì)state進(jìn)行更改陡鹃。每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方抖坪，并且它會(huì)接受 state 作為第一個(gè)參數(shù)：
const mutations = {
increment (state) {
state.count++
},
decrement (state) {
state.count--
}
}
通過store.commit方法調(diào)用響應(yīng)的mutation
store.commit('increment')
向mutation中傳入額外參數(shù)(最好是一個(gè)對(duì)象)
incrementNum (state, num) {
state.count = state.count + num
}
incrementNum: ({ commit }, num) => commit('incrementNum', num),
對(duì)象風(fēng)格的提交方式
提交 mutation 的另一種方式是直接使用包含 type 屬性的對(duì)象：
store.commit({
type: 'increment',
num: 10
})
Mutation 必須是同步函數(shù)
mutation的作用是要該表state狀態(tài)擦俐，mutation函數(shù)中的state的狀態(tài)必須是可追蹤的，當(dāng)使用異步方法的時(shí)候蚯瞧，會(huì)導(dǎo)致devtools無法定位何時(shí)異步回調(diào)函數(shù)被調(diào)用嘿期，從而導(dǎo)致state改變不可追蹤。
在組件中提交 Mutation
不常用埋合，一般通過actions 的dispatch 分發(fā)一個(gè)action备徐，在action中進(jìn)行commit mutation。
你可以在組件中使用 this.$store.commit('xxx') 提交 mutation甚颂，或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用（需要在根節(jié)點(diǎn)注入 store）蜜猾。
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`
// `mapMutations` 也支持額外參數(shù)：
'incrementNum' // 將 `this.incrementBy(num)` 映射為 `this.$store.commit('incrementBy', num)`,組件中調(diào)用此方法的時(shí)候傳參，此處不需要顯示聲明參數(shù)
])
}
}
Action
Action 類似于 mutation振诬，不同在于：
1.Action 提交的是 mutation蹭睡，而不是直接變更狀態(tài)。
2.Action 可以包含任意異步操作赶么。
actions注冊(cè)：
const actions = {
incrementNum: ({ commit }, num) => commit('incrementNum', num),
increment: ({ commit }) => commit('increment'),
decrement: ({ commit }) => commit('decrement'),
incrementIfOdd ({ commit, state }) {
if ((state.count + 1) % 2 === 0) {
commit('increment')
}
},
incrementAsync ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('increment')
resolve()
}, 1000)
})
}
}
Action接收context對(duì)象作為參數(shù)肩豁，具有和store相同的方法和屬性，如state，getters清钥，commit琼锋，dispatch，所以也可以調(diào)用這些屬性和方法祟昭，通常通過結(jié)構(gòu)賦值使用缕坎。
分發(fā)action
Action 通過 store.dispatch 方法觸發(fā)：
store.dispatch('increment')
Action內(nèi)部可以執(zhí)行異步操作
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
支持提供額外參數(shù)：
// 以載荷(額外參數(shù))形式分發(fā)
store.dispatch('incrementAsync', {
amount: 10
})
// 以對(duì)象形式分發(fā)
store.dispatch({
type: 'incrementAsync',
amount: 10
})
store.dispatch 可以處理被觸發(fā)的 action 的處理函數(shù)返回的 Promise，并且 store.dispatch 仍舊返回 Promise
