详解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 XMLHttpRequest对象全面剖析
Apr 24 Javascript
Javascript Object.extend
May 18 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
javascript里使用php代码实例
Dec 13 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
最新最全的手机号验证正则表达式
Feb 24 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 parse_url 一个好用的函数
2009/10/03 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
推荐dojo学习笔记
2007/03/24 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python的类方法和静态方法
2014/12/13 Python
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
python requests证书问题解决
2019/09/05 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
python网络编程之五子棋游戏
2020/05/14 Python
物业公司的岗位任命书
2014/06/06 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
拾金不昧感谢信
2015/01/21 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
MySQL创建管理子分区
2022/04/13 MySQL
排查Tomcat进程假死的问题
2022/05/06 Servers