vuex commit保存數據技巧

vuex 單向數據流，推薦的commit 改變state數據，寫起來很是繁瑣，由於改數據可能要寫不少commit函數。

依據個人理解，單向數據流主要是爲了不數據混亂，便於調試。 說白了，就是一個數據改變了，是什麼促使他改變的。

數據流向永遠都是一個方向，下游是沒有權利改變數據的，因此須要數據發放中心同一級的方法來改變數據。

對於採用commit保存state數據的，能夠採用以下方式：

傳一個字符串的path和須要修改的值,若是path='a.b.c'就換算成state[a][b][c] = ‘needsave’ ,這就實現了一個commit 解決全部保存的問題。若是要調試，能夠在函數中debugger。

// mutations中的函數
save(state, { path, data }) {
  if (!path ) {
    throw new Error('need path')
  }
  const keyPath = path.split('.')
  let needSave = state
  for (let i = 0; i < keyPath.length - 1; i++) {
   needSave = needSave[keyPath[i]]
   if(!needSave) {
    throw new Error(`error path: ${keyPath[i]}`)
   }
  }

  needSave[keyPath[keyPath.length - 1]] = data
},
// 使用

vuex.commit('save', {path:'a.b.c', data:val})

// 結果
state.a.b.c = '我是須要保存的數據'

在組件中

//若是要雙向綁定某個vuex中的值。
<input v-model="c">

//script

computed: {
   c: {
       get(){
         return vuex.state.a.b.c
        },  
       set(val) {
         vuex.commit('save', {path:'a.b.c', data:val})
       }
    }  
}
// 這樣就作到了在組件中雙向綁定，而且使用commit改變state中的值，vuex使用嚴格模式也不會報錯了。