vuex commit保存数据技巧

Crazy_Coder 发布于2019-08-23 12:28 / 1862人阅读

摘要：使用时官方推荐使用才修改数据。缺点采用修改数据，可能会写很多函数。会上丧失掉一部分性能。因为新数据需要重新配置。使用我是需要保存的数据我是需要保存的数据组件中使用如果要双向绑定某个中的值。

使用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中的值。

 
//script
computed: {
   c: {
       get(){
         return vuex.state.a.b.c
        }, 
       set(val) {
         vuex.commit("save", {path:"a.b.c",data: val})
       }
    } 
}

这样就做到了在组件中双向绑定，并且使用commit改变state中的值，vuex使用严格模式也不会报错了。

GPU云服务器云服务器 Vuex vuex cdn COMMITTED COMMITED

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98564.html

Vuex 入门到进阶

先说一下Vuex到底是什么？ Vuex 是一个专门为 vue.js 应用程序开发的状态管理模式这个状态我们可以理解为在 data 中的属性，需要共享给其他组件使用的部分也就是说，我们需要共享的数据，可以使用 vuex 进行统一集中式的管理喜欢看代码学习的的可直接下载下方 Demo https://gitee.com/jiangliyue/... Vuex中的五种基本对象 state...

mylxsw 2019-08-23 18:30 评论0 收藏0
深入学习Vuex

摘要：深入学习作为配合使用的数据状态管理库，针对解决兄弟组件或多层级组件共享数据状态的痛点问题来说，非常好用。至此，构造函数部分已经过了一遍了。深入学习Vuex vuex作为配合vue使用的数据状态管理库，针对解决兄弟组件或多层级组件共享数据状态的痛点问题来说，非常好用。本文以使用者的角度，结合源码来学习vuex。其中也参考了许多前辈的文章,参见最后的Reference Vue加载Vuex...

codercao 2019-08-22 18:28 评论0 收藏0
深入学习Vuex

摘要：深入学习作为配合使用的数据状态管理库，针对解决兄弟组件或多层级组件共享数据状态的痛点问题来说，非常好用。至此，构造函数部分已经过了一遍了。深入学习Vuex vuex作为配合vue使用的数据状态管理库，针对解决兄弟组件或多层级组件共享数据状态的痛点问题来说，非常好用。本文以使用者的角度，结合源码来学习vuex。其中也参考了许多前辈的文章,参见最后的Reference Vue加载Vuex...

funnyZhang 2019-08-02 10:50 评论0 收藏0
Vuex 小tip

vuex基本使用和相关规范 dispatch提交action,commit提交mutation。dispatch是异步，commit 是同步通过使用,import和mapActions 可以获取action的方法并且能够直接调用或重命名调用只允许通过mutation 来变更state的状态（内容）官方Action介绍 action介绍 import { mapAc...

HelKyle 2019-08-22 13:55 评论0 收藏0