详解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之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
javascript对象的创建和访问
Mar 08 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
RequireJS用法简单示例
Aug 20 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
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
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
简单介绍Python中的round()方法
2015/05/15 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
国际花店:Pickup Flowers
2020/04/10 全球购物
个人委托书格式
2014/04/04 职场文书
护士求职自荐信
2015/03/25 职场文书
2015年安全月活动总结
2015/03/26 职场文书
儿子满月酒致辞
2015/07/29 职场文书
高中军训感想
2015/08/07 职场文书