vuex commit保存數據技巧

使用vuex時 官方推薦使用commit才修改state數據。

優點

• 便於調試，當數據變化時，可以在vuetools工具中看到是哪個函數修改了state值。

缺點

• 采用commit修改數據，可能會寫很多mutations函數。
• 會上喪失掉一部分性能。因為新數據需要重新配置watcher。

優化

• 傳一個字符串的path和需要修改的值,如果path='a.b.c'就換算成 state.a.b.c = 'needsave', 這就達到了一個commit 解決所有保存的問題。

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:'我是需要保存的數據'})
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使用嚴格模式也不會報錯了。

原文地址：https://segmentfault.com/a/1190000016759577