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

相关推荐