vuex commit保存数据技巧

Posted 2020-08-18

使用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