vuex直接修改state 与 用commit提交mutation来修改state的差异
一. 使用vuex修改state时,有两种方式:
1)可以直接使用 this.$store.state.变量 = xxx;
2)this.$store.dispatch(actionType, payload)
或者 this.$store.commit(commitType, payload)
二. 异同点
1)共同点: 能够修改state里的变量,并且是响应式的(能触发视图更新)
2)不同点:
若将vue创建 store 的时候传入 strict: true, 开启严格模式,那么任何修改state的操作,只要不经过
mutation的函数,
vue就会 throw error : [vuex] Do not mutate vuex store state outside mutation handlers。
(该报错原因,请看源码:https://blog.csdn.net/zhq2005095/article/details/78359883 );
三.使用commit提交到mutation修改state的优点:
vuex能够记录每一次state的变化记录,保存状态快照,实现时间漫游/回滚之类的操作。
(实际本人未用到,暂时未遇到使用该特性的需求)
结论: 官方要求最好设置严格模式,并且每次都要commit来修改state,而不能直接修改state,以便于调试等
vuex直接修改state 与 用commit提交mutation来修改state的差异的更多相关文章
- Git 实用操作:撤销 Commit 提交
有的时候,改完代码提交 commit 后发现写得实在太烂了,连自己的都看不下去,与其修改它还不如丢弃重写.怎么操作呢? 使用 reset 撤销 如果是最近提交的 commit 要丢弃重写可以用 res ...
- Vue Vuex 严格模式+实例解析+dispatch/commit + state/getter
1.严格模式 import getters from './getters' import mutations from './mutations' import actions from './ac ...
- 使用git命令修改commit提交信息
很多时候我们在提交代码时可能会把commit提交信息写错了,这个时候我们就可以用到下面的git命令来修改commit提交信息 git commit --amend 输入"i"之后进 ...
- mutation中修改state中的状态值,却报[vuex] do not mutate vuex store state outside mutation handlers.
网上百度说是在mutation外修改state中的状态值,会报下列错误,可我明明在mutations中修改的状态值,还是报错 接着百度,看到和我类似的问题,说mutations中只能用同步代码,异步用 ...
- 的Linq未提交之前插入/修改时重新查询不准确问题
来园子已经两年了,每次都是看,这次咱也写一次. 说一下今天遇到的Linq问题: 每一次插入流水表时,都需要查找表中最大的流水号+1,并且将该流水号返回,但是在同一个SubmitChange之内插入多条 ...
- [No000091]SVN学习笔记2-TortoiseSVN Client初级操作update(获取)、commit(提交)
SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subversion是什么? ...
- 6.Git内容修改之后的查看和提交
我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed version c ...
- Github上怎么修改别人的项目并且提交给原作者!图文并茂!
Github上怎么修改别人的项目并且提交给原作者!图文并茂! 写这篇博客的初衷,是因为我的项目Only需要一些朋友一起参与进来,但是很多的Git都不是很熟练,其实版本控制这种东西没有什么难度的,只要稍 ...
- 规范git commit提交记录和版本发布记录
在开发过程中我们一般都会用到git管理代码,在git commit提交代码时我们一般对git commit message随便写点简单的描述,可是随着项目参与人数的增多,发现提交的commit记录越来 ...
随机推荐
- Vue.js 关于双向绑定的一些实现细节
Vue.js 是采用 Object.defineProperty 的 getter 和 setter,并结合观察者模式来实现数据绑定的. 当把一个普通 Javascript 对象传给 Vue 实例来作 ...
- js 监听音频视频控件是否播放
监听onplaying: var myVideo=document.getElementById("video1"); myVideo.addEventListener(" ...
- PYTHON 100days学习笔记008-2:模块
目录 Day008_02:模块 1.import语句 1.1from - import 语句 1.2 from - import * 语句 2.深入模块 2.1 __name__属性 2.2 dir( ...
- 原生js实现图片的3d效果
<!doctype html><html lang="en"><head><meta charset="UTF-8"& ...
- Kernel--试题
1. 内核堆栈区别: 1.栈自动分配回收,函数里面声明的变量:2.堆:malloc kmalloc申请的空间,需要自己释放 https://blog.csdn.net/tainjau/article/ ...
- php中连接tcp服务的三种方式
首先需要现有一个 tcp 服务,我们使用 php中的 socket 系列函数实现 <?php //创建socket套接字 $socket = socket_create(AF_INET, SOC ...
- Python 【格式化字符串】
print('血量:'+str(player_life)+' 攻击:'+str(player_attack)) 第一种格式化字符串 print('血量:%s 攻击:%s' % (player_life ...
- 怎样修改一个已存在的Cookie
Cookie的修改也需要借助 Response-Header 的 Set-Cookie 字段, 不过需要注意的是: 待修改cookie的 key / domain / path / secure 必须 ...
- 基于C#实现与新大陆扫码枪通信
随着工业互联的发展,扫码枪在很多场合都有所应用,超市.商场以及一些智能工厂.今天主要讲如何通过C#实现与新大陆扫码枪(OY10)进行通信,对于扫码枪的配置,这里就不多说了,结合说明书就可以实现.这里值 ...
- C# 使用Emit实现动态AOP框架 (一)
目 录 C# 使用Emit实现动态AOP框架 (一) C# 使用Emit实现动态AOP框架 (二) C# 使用Emit实现动态AOP框架 (三) C# 使用Emit实现动态AOP框架 进阶篇之异常处 ...