vuex直接修改state 与 用dispatch/commit来修改state的差异
一. 使用vuex修改state时,有两种方式:
1.可以直接使用 this.$store.state.变量 = xxx;
2.this.$store.dispatch(actionType, payload)
或者: this.$store.commit(commitType, payload)
使用dispatch 和 commit的区别在于,前者是异步操作,后者是同步操作,所以 一般情况下,推荐直接使用commit,
即 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。
三.使用commit提交到mutation修改state的优点:
vuex能够记录每一次state的变化记录,保存状态快照,实现时间漫游/回滚之类的操作。
(实际本人未用到,暂时未遇到使用该特性的需求)
结论: 官方推荐最好设置严格模式,并且每次都要commit来修改state,而不能直接修改state,以便于调试等。
vuex直接修改state 与 用dispatch/commit来修改state的差异的更多相关文章
- Vue Vuex中的严格模式/实例解析/dispatch/commit /state/getters
严格模式 import getters from './getters' import mutations from './mutations' import actions from './acti ...
- Vue Vuex 严格模式+实例解析+dispatch/commit + state/getter
1.严格模式 import getters from './getters' import mutations from './mutations' import actions from './ac ...
- Vuex入门实践(中)-多module中的state、mutations、actions和getters
一.前言 上一篇文章<Vuex入门实践(上)>,我们一共实践了vuex的这些内容: 1.在state中定义共享属性,在组件中可使用[$store.state.属性名]访问共享属性 2.在m ...
- [React] Use the useReducer Hook and Dispatch Actions to Update State (useReducer, useMemo, useEffect)
As an alternate to useState, you could also use the useReducer hook that provides state and a dispat ...
- Redhat修改主机名_Red hat怎么永久修改主机名hostname(转)
有几种方式修改Redhat的主机名字,这些方法也适合其他的Centos系统,下面介绍Red hat怎么永久修改主机名hostname的三种方法. 方法一: 说明"hostname" ...
- 怎么修改电脑MAC地址 电脑MAC地址修改图文教程
本文转载:http://www.45fan.com/a/Router/2677.html MAC地址是指电脑网卡的硬件地址,此地址一般烧录在网卡上.MAC地址工作在OSI七层模型的第二层,即数据链接层 ...
- 一键强制修改任意Mysql数据库的密码,修改任意环境Mysql数据库。
本文采用我软件里面的内置改密功能,可以一键强制修改Mysql数据库的密码, 在修改过程中,会强制干掉Mysql主程序,修改完成后重新启动Mysql就可以了. 首先讲解如何一键强制修改PHPWAMP自身 ...
- Xcode里修改工程名、类名、批量修改变量名
转:http://blog.csdn.net/yuedong56/article/details/13767001 一.修改工程名: 1.点击工程,右键,选择如图选项. 2.右侧如图位置,修改工程名. ...
- 团队项目系列博客 —— 在路上(之wampserver 修改根目录以及配置多站点以及修改端口号)
团队项目系列博客 -- 在路上(之wampserver 修改根目录以及配置多站点以及修改端口号) 标签(空格分隔): wampserver php 参考:参考文献1.慕课网.知乎.github 一.w ...
随机推荐
- Java原子类操作原理剖析
◆CAS的概念◆ 对于并发控制来说,使用锁是一种悲观的策略.它总是假设每次请求都会产生冲突,如果多个线程请求同一个资源,则使用锁宁可牺牲性能也要保证线程安全.而无锁则是比较乐观的看待这个问题,它会假设 ...
- 【Android Studio安装部署系列】八、Android Studio主题皮肤更换
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Android Studio具有自己的主题皮肤,但是如果想要更换自己喜欢的主题皮肤,可以参考下面的步骤. 注意,更换主题皮肤,之前的 ...
- springboot~configserver里对重要信息进行RSA加密
简介 参考:https://springcloud.cc/spring-cloud-dalston.html#_encryption_and_decryption_2 RSA非对称加密有着非常强大的安 ...
- 强化学习(三)用动态规划(DP)求解
在强化学习(二)马尔科夫决策过程(MDP)中,我们讨论了用马尔科夫假设来简化强化学习模型的复杂度,这一篇我们在马尔科夫假设和贝尔曼方程的基础上讨论使用动态规划(Dynamic Programming, ...
- 使用.NetCore 控制台演示 熔断 降级(polly)
1.熔断降级的概念: 熔断:我这里有一根长度一米的钢铁,钢铁的熔点1000度(假设),现在我想用力把这根钢铁折弯,但是人的力有限达不到折弯的点,然后我使用火给钢铁加热,每隔一段时间我就会尝试一下是否能 ...
- Linux高级运维 第三章 Linux基本命令操作
3.1 Linux终端介绍.Shell提示符.Bash基本语法 3.1.1 登录LINUX终端 两种终端仿真器:1.GNOME桌面的GHOME Terminal : 2.KDE桌面的Konsole ...
- ThinkPHP 5.0/5.1 自定义404界面的配置
★ 背景还要啥背景,就是觉得不可能用框架自带的 404 界面呗.可能跟之前的版本配置方法有点区别,在此做一下简单的笔记 框架:ThinkPHP 5.1,ThinkPHP5.0.20 ★ 配置过程♩. ...
- Html和Css学习笔记-html基础知识
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
- Android为TV端助力 EventBus出现has no public methods called onEvent的问题
Caused by: de.greenrobot.event.EventBusException: Subscriber class com.hhzt.iptv.lvb_w.socket.MyMsgS ...
- Handler,Looper,MessageQueue流程梳理
目的:handle的出现主要是为了解决线程间通讯. 举个例子,android是不允许在主线程中访问网络,因为这样会阻塞主线程,影响性能,所以访问网络都是放在子线程中执行,对于网络返回的结果则需要显示在 ...