Vuex中mutations和actions傳參寫法

一、vuex中mutations如何傳多個參數

1.傳一個參數寫法

mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)

2.傳多個參數寫法

mutations: {
  increment (state, payload) {
    state.count += payload.amount1；
    state.count += payload.amount2；
    state.count += payload.amount3；
    state.count += payload.amount4；
} }
store.commit('increment', {
 amount1: 10,
 amount2: 20，
 amount3: 30，
 amount4: 40，
 }

二、vuex中actions參數

1.一般寫法：

actions:{
    add_num({commit}){
        console.log({commit})
        setTimeout(() => {
            commit('change',100);
        },2000)
    }
}

2.{commit}代表什么

　action函數可以接收一個與store實例具有相同方法的屬性context，這個屬性中包括如下:

 context:{
        state,   等同於store.$state，若在模塊中則為局部狀態
        rootState,   等同於store.$state,只存在模塊中
        commit,   等同於store.$commit
        dispatch,   等同於store.$dispatch
        getters   等同於store.$getters
}
常規寫法調用的時候會使用context.commit，但更多的是使用es6的變量解構賦值，也就是直接在參數的
 位置寫自己想要的屬性，如：{commit}。

3.傳自定義參數，一個或多個方法同mutations方式相同

三、vuex 中dispatch 和 commit 的用法和區別

　　　　dispatch：含有異步操作，例如向后台提交數據，寫法： this.$store.dispatch('action方法名',值)

　　　　commit：同步操作，寫法：this.$store.commit('mutations方法名',值)　　　　

　　　　使用dispatch 和 commit的區別在於，前者是異步操作，后者是同步操作，所以 一般情況下，推薦直接使用commit，即 this.$store.commit(commitType, payload)，以防異步操作會帶來的延遲問題

　　　　異同點：

　　　　　　1.同： 能夠修改state里的變量，並且是響應式的（能觸發視圖更新）

　　　　　　2.異：

　　　　　　　　若將vue創建 store 的時候傳入 strict: true, 開啟嚴格模式，那么任何修改state的操作，只要不經過mutation的函數，vue就會  throw error :    [vuex] Do not mutate vuex store state outside mutation handlers

　　　　結論： 官方推薦最好設置嚴格模式，並且每次都要commit來修改state，而不能直接修改state，以便於調試等。