一. 使用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. Python项目,VS Code控制台输出乱码问题解决办法

    一.添加系统变量 在window环境变量中,添加环境变量 PYTHONIOENCODING = UTF-8. 二.在文件中设置输出编码 import io import sys sys.stdout ...

  2. 使用前端技术和MySQL+PHP制作自己的一个个人博客网站

    源代码地址:https://github.com/YauCheun/BlogCode 我的博客网站地址:http://www.yublog.fun/ 制作前景: 想拥有一个自己独自开发的一个小型博客网 ...

  3. 经典排序算法 — C#版本(中)

    归并排序比较适合大规模得数据排序,借鉴了分治思想. 归并排序原理 自古以来,分久必合合久必分. 我们可以这样理解归并排序,分-分到不能分为止,然后合并. 使用递归将问题一点一点分解,最后进行合并. 分 ...

  4. Hadoop系列001-大数据概论

    本人微信公众号,欢迎扫码关注! 大数据概论 1.大数据概念 大数据(big data),指无法在一定时间范围内用常规软件工具进行捕捉.管理和处理的数据集合,是需要新处理模式才能具有更强的决策力.洞察发 ...

  5. Capacitor 新一代混合应用“神器” 会代替Cordova吗??

    1.介绍or畅想 Capacitor是由ionic团队最新开发维护的一个跨平台的应用程序容器,可以轻松构建在iOS,Android,Electron 和 Web 上本机运行的Web应用程序.我们称这些 ...

  6. C# 《编写高质量代码改善建议》整理&笔记 --(五)类型设计

    1.区分接口和抽象类的应用场合 区别: ①接口支持多继承,抽象类则不能. ②接口可以包含方法,属性,索引器,事件的签名,但不能有实现,抽象类则可以. ③接口在增加新方法后,所有的继承者都必须重构,否则 ...

  7. MySQL视图简介与操作

    1.准备工作 在MySQL数据库中创建两张表balance(余额表)和customer(客户表)并插入数据. create table customer( id int(10) primary key ...

  8. Spring Boot分布式系统实践【基础模块构建3.3】注解轻松实现操作日志记录

    日志注解 前言 spring切面的编程,spring中事物处理.日志记录常常与pointcut相结合 * * Pointcut 是指那些方法需要被执行"AOP",是由"P ...

  9. MySQL via EF6 的试用报告

    1.如何通过 EF6 来连接 MySQL? 2.如何通过 EF6 来实现 CRUD? 2.1.Create 添加 2.2.Retrieve 查询 2.3.Update 修改 2.4.Delete 删除 ...

  10. ado.net的简单数据库操作(二)之封装SqlHelperl类

    今天我书接上回,接着昨天的ado.net的数据库操作的相关知识来讲哈! 从上篇文章给出的实例来看,你一定会发现,操作数据库其实还挺麻烦的,就连一个最简单的数据库操作语句都要包括 定义数据库连接字符串. ...