一. 使用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的差异的更多相关文章

  1. Vue Vuex中的严格模式/实例解析/dispatch/commit /state/getters

    严格模式 import getters from './getters' import mutations from './mutations' import actions from './acti ...

  2. Vue Vuex 严格模式+实例解析+dispatch/commit + state/getter

    1.严格模式 import getters from './getters' import mutations from './mutations' import actions from './ac ...

  3. Vuex入门实践(中)-多module中的state、mutations、actions和getters

    一.前言 上一篇文章<Vuex入门实践(上)>,我们一共实践了vuex的这些内容: 1.在state中定义共享属性,在组件中可使用[$store.state.属性名]访问共享属性 2.在m ...

  4. [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 ...

  5. Redhat修改主机名_Red hat怎么永久修改主机名hostname(转)

    有几种方式修改Redhat的主机名字,这些方法也适合其他的Centos系统,下面介绍Red hat怎么永久修改主机名hostname的三种方法. 方法一: 说明"hostname" ...

  6. 怎么修改电脑MAC地址 电脑MAC地址修改图文教程

    本文转载:http://www.45fan.com/a/Router/2677.html MAC地址是指电脑网卡的硬件地址,此地址一般烧录在网卡上.MAC地址工作在OSI七层模型的第二层,即数据链接层 ...

  7. 一键强制修改任意Mysql数据库的密码,修改任意环境Mysql数据库。

    本文采用我软件里面的内置改密功能,可以一键强制修改Mysql数据库的密码, 在修改过程中,会强制干掉Mysql主程序,修改完成后重新启动Mysql就可以了. 首先讲解如何一键强制修改PHPWAMP自身 ...

  8. Xcode里修改工程名、类名、批量修改变量名

    转:http://blog.csdn.net/yuedong56/article/details/13767001 一.修改工程名: 1.点击工程,右键,选择如图选项. 2.右侧如图位置,修改工程名. ...

  9. 团队项目系列博客 —— 在路上(之wampserver 修改根目录以及配置多站点以及修改端口号)

    团队项目系列博客 -- 在路上(之wampserver 修改根目录以及配置多站点以及修改端口号) 标签(空格分隔): wampserver php 参考:参考文献1.慕课网.知乎.github 一.w ...

随机推荐

  1. Hadoop2.0伪分布式平台环境搭建

    一.搭建环境的前提条件 环境:ubuntu-16.04 hadoop-2.6.0  jdk1.8.0_161.这里的环境不一定需要和我一样,基本版本差不多都ok的,所需安装包和压缩包自行下载即可. 因 ...

  2. java虚拟机内存区域

    java虚拟机运行时数据 程序计数器 是一块较小的内存空间,属于线程私有的内存. 用来记录正在执行的虚拟机字节码指令的地址. 每个线程都需要一个独立的程序计数器,各个线程间的计数器互不影响,独立存储. ...

  3. 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 ...

  4. arguments对象详解

    在javascript中,函数是没有重载这一项的,所谓的重载,一个函数可以有多个,就是参数的个数和形式不同所以引用的功能不同,而js不存在函数重载,不管传不传参数,函数里面是否引用,关系都不大,一个函 ...

  5. WKWebView讲解与使用

    随着IOS开发的应用,对于网页嵌入也越来越多了,在IOS 8之前我们使用UIWebView展示详情页,自从IOS 8之后就出现了WKWebView,相比UIWebView,WKWebView优化了较多 ...

  6. 微信小程序性能优化之一

    性能优化 界面和业务逻辑之间事件交互小程序调用nativeNative回调小程序 图片源文件优化 渲染优化 ---------------------------------------------- ...

  7. VS code 设置中文后也显示英文的问题

    按f1 搜索 Configore Display Language 设置 zh-cn 关闭软件重启. 如果重启菜单等还是英文的,在商店查看已安装的插件,把中文插件重新安装一遍,然后重启软件.

  8. Redis分布式队列和缓存更新

    原文链接:https://www.cnblogs.com/hua66/p/9600085.html 在使用Redis中,我们可能会遇到以下场景: 例如: 某用户向服务器中发送一个请求,服务器将用户请求 ...

  9. 2.python中self详解(程序适用于python3版本)

    先介绍下Python中的类和实例面向对象最重要的概念就是类(class)和实例(instance),类(class)是抽象的模板,比如学生这个抽象的事物,可以用一个Student类来表示.而实例是根据 ...

  10. js 控制随机数生成概率

    基本思路:把Math.random()生成的数看着百分比,然后定义每个整数值取值范围. 'use strict'; export default class GL { /** * 构造函数 * @pa ...