vue-vuex中使用commit提交mutation来修改state的方法详解


Posted in Javascript onSeptember 16, 2018

在vuex中,关于修改state的方式,需要commit提交mutation。官方文档中有这么一句话:

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

为了搞清楚其原因,查阅了很多资料,发现其它人在做vuex的源码解析的时候,并没有将这点说的很明白。

所以只好自己去查看vuex的源码,并且自己做demo进行验证。

但是试验后,发现直接修改state时,store中的state能够改变,并且是响应式的,并没有报错。跟commit提交mutation的方式没啥区别。

后来在github上遇到一位朋友,提醒试试严格模式下会发生什么。

一、两种修改state方式的区别

在vuex官方文档上看到了关于严格模式的描述:

开启严格模式,仅需在创建 store 的时候传入 strict: true;

在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

于是,将vuex设置成了严格模式。

直接修改state发现控制台确实是报出了错误,但是state修改成功,并且依然是响应式的。

错误提示:

Do not mutate vuex store state outside mutation handlers.

vue-vuex中使用commit提交mutation来修改state的方法详解

通过commit 提交 mutation 的方式来修改 state 时,vue的调试工具能够记录每一次state的变化,这样方便调试。但是如果是直接修改state,则没有这个记录。

vue-vuex中使用commit提交mutation来修改state的方法详解

commit修改state源码分析

以上已经讨论了在严格模式下,直接修改state会造成报错。接下来通过分析源码来一探究竟。

首先应该分析commit函数的代码,因为mutation是通过commit函数来执行的。

vue-vuex中使用commit提交mutation来修改state的方法详解

在commit函数内部,由this._commit()函数来修改state。那么 _withCommit 又是什么呢,接着看 _withCommit 的代码:

vue-vuex中使用commit提交mutation来修改state的方法详解

_withCommit 函数的参数 fn 就是修改state的函数。在执行 fn() 之前,会将 this._committing 设置为 true。等到fn()执行完毕后,又将 this._committing 的值进行恢复。那么为什么要将 this._withCommitting设置为true,其作用到底是什么。在vuex/src/store.js 的开头发现了判断严格模式的代码:

vue-vuex中使用commit提交mutation来修改state的方法详解

这三行代码很简单:当 vuex设置为严格模式的时候,就会执行 enableStrictMode 函数。那么 enableStrictMode 又是什么鬼?

vue-vuex中使用commit提交mutation来修改state的方法详解

在 enableStrictMode 函数内部,调用了 $watch 函数来观察 state的变化。当state变化时,就会调用 assert 函数,判断 store._committing(即 上文的 this._committing) 的值,如果不为 true,就会报出异常:

Do not mutate vuex store state outside mutation handlers.

所以,如果通过外部直接修改state,则没有执行 commit 函数,也就没有执行 _withCommit 函数,进而 this._withCommitting 的值 不为 true,故当执行 enableStrictMode 时,则会执行 assert 函数,因为_withCommitting不为true,则报出异常了。

结语

综上所述,在vuex中,最好设置成严格模式,并且按照文档的要求,通过commit提交mutation的方式来修改state,而不要直接修改state。不然,控制台会报错,并且vue调试工具不会记录state的变化,无法调试。

以上这篇vue-vuex中使用commit提交mutation来修改state的方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 中关于CSS操作部分使用说明
Jun 10 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
浅谈vue 单文件探索
Sep 05 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 #Javascript
分享5个好用的javascript文件上传插件
Sep 16 #Javascript
vuex直接赋值的三种方法总结
Sep 16 #Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 #Javascript
vue2过滤器模糊查询方法
Sep 16 #Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 #Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 #Javascript
You might like
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
解析yii数据库的增删查改
2013/06/20 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
谷歌地图打不开的解决办法
2014/08/07 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
Python二元赋值实用技巧解析
2019/10/25 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
详解Python yaml模块
2020/09/23 Python
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
追讨欠款律师函
2015/05/27 职场文书
春风化雨观后感
2015/06/11 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技