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 ...
随机推荐
- Hadoop2.0伪分布式平台环境搭建
一.搭建环境的前提条件 环境:ubuntu-16.04 hadoop-2.6.0 jdk1.8.0_161.这里的环境不一定需要和我一样,基本版本差不多都ok的,所需安装包和压缩包自行下载即可. 因 ...
- java虚拟机内存区域
java虚拟机运行时数据 程序计数器 是一块较小的内存空间,属于线程私有的内存. 用来记录正在执行的虚拟机字节码指令的地址. 每个线程都需要一个独立的程序计数器,各个线程间的计数器互不影响,独立存储. ...
- eclipse升级Android SDK Tool版本到25.2.5后运行项目报错Unable to build: the file dx.jar was not loaded from the SDK folder
概述 由于最近通过SDK-Manager更新了build-tools,当要用到dx.jar这个包时,自动调用最新版本Android SDK build-tools中dx.jar,但是运行android ...
- arguments对象详解
在javascript中,函数是没有重载这一项的,所谓的重载,一个函数可以有多个,就是参数的个数和形式不同所以引用的功能不同,而js不存在函数重载,不管传不传参数,函数里面是否引用,关系都不大,一个函 ...
- WKWebView讲解与使用
随着IOS开发的应用,对于网页嵌入也越来越多了,在IOS 8之前我们使用UIWebView展示详情页,自从IOS 8之后就出现了WKWebView,相比UIWebView,WKWebView优化了较多 ...
- 微信小程序性能优化之一
性能优化 界面和业务逻辑之间事件交互小程序调用nativeNative回调小程序 图片源文件优化 渲染优化 ---------------------------------------------- ...
- VS code 设置中文后也显示英文的问题
按f1 搜索 Configore Display Language 设置 zh-cn 关闭软件重启. 如果重启菜单等还是英文的,在商店查看已安装的插件,把中文插件重新安装一遍,然后重启软件.
- Redis分布式队列和缓存更新
原文链接:https://www.cnblogs.com/hua66/p/9600085.html 在使用Redis中,我们可能会遇到以下场景: 例如: 某用户向服务器中发送一个请求,服务器将用户请求 ...
- 2.python中self详解(程序适用于python3版本)
先介绍下Python中的类和实例面向对象最重要的概念就是类(class)和实例(instance),类(class)是抽象的模板,比如学生这个抽象的事物,可以用一个Student类来表示.而实例是根据 ...
- js 控制随机数生成概率
基本思路:把Math.random()生成的数看着百分比,然后定义每个整数值取值范围. 'use strict'; export default class GL { /** * 构造函数 * @pa ...