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 相关文章推荐
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
初步了解javascript面向对象
Nov 09 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 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 错误处理机制
2015/07/06 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
python的urllib模块显示下载进度示例
2014/01/17 Python
Web服务器框架 Tornado简介
2014/07/16 Python
Python实现获取网站PR及百度权重
2015/01/21 Python
24式加速你的Python(小结)
2019/06/13 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
python 实现图片批量压缩的示例
2020/12/18 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
学习雷锋寄语大全
2014/04/11 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
初中化学教学反思
2016/02/22 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
javascript Number 与 Math对象的介绍
2021/11/17 Javascript