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使用严格模式也不会报错了。