vuex commit保存数据技巧

转载

mb5ff591cb6ec96 2018-11-03 16:01:00

文章标签 数据双向绑定严格模式 i++ 字符串 文章分类 JavaScript 前端开发

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