详解vuex commit保存数据技巧


Posted in Javascript onDecember 25, 2018

vuex 单向数据流,推荐的commit 改变state数据,写起来非常繁琐,因为改数据可能要写很多commit函数。

依据我的理解,单向数据流主要是为了避免数据混乱,便于调试。 说白了,就是一个数据改变了,是什么促使他改变的。

数据流向永远都是一个方向,下游是没有权利改变数据的,所以需要数据发放中心同一级的方法来改变数据。

单项数据流,对于react来说,的确是必要的,但对于vue来说,是那么有必要吗?

vue采用数据依赖更新,必要的数据都采用Object.defineProperty处理。给数据赋值时,本来就会通知所有采用此数据的dom更新,不管是不是父级还是子级组建的dom。

使用vuex时 官方推荐使用commit才修改state数据。

优点

  • 便于调试,当数据变化时,可以在vuetools工具中看到是哪个函数修改了state值。

缺点

  • 采用commit修改数据,可能会写很多mutations函数。
  • 会上丧失掉一部分性能。因为新数据需要重新配置watcher。

优化

对于采用commit保存state数据的,可以采用如下方式:

传一个字符串的path和需要修改的值,如果path='a.b.c'就换算成 state.a.b.c = 'needsave', 这就达到了一个commit 解决所有保存的问题。

// mutations中的函数
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:val})
// 结果
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使用严格模式也不会报错了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript语句可以不以;结尾的烦恼
Mar 08 Javascript
js活用事件触发对象动作
Aug 10 Javascript
JavaScript 未结束的字符串常量常见解决方法
Jan 24 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
bootstrap table实现合并单元格效果
Dec 24 #Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 #Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 #Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 #Javascript
Vue.js组件高级特性实例详解
Dec 24 #Javascript
JavaScript模板引擎原理与用法详解
Dec 24 #Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 #jQuery
You might like
php fckeditor 调用的函数
2009/06/21 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
php上传excel表格并获取数据
2017/04/27 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
jquery操作select方法汇总
2015/02/05 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
Python中使用SAX解析xml实例
2014/11/21 Python
探究python中open函数的使用
2016/03/01 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
Python中itertools的用法详解
2020/02/07 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
大数据分析用java还是Python
2020/07/06 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
Android面试题及答案
2015/09/04 面试题
自主招生自荐书
2013/11/29 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL