VUEX-action可以修改state吗


Posted in Javascript onNovember 19, 2019

首先回顾下vuex,官网图如下

VUEX-action可以修改state吗

  • Vuex 的 store 中的状态的唯一方法是提交 mutation(mutation类似于事件且必须是同步函数)
  • action 提交的是 mutation,而不是直接变更状态且可以包含任意异步操作(Action通过 store.dispatch 方法触发)

一幅图看清只能通过mutation修改state的原因

VUEX-action可以修改state吗

commit函数源码如下

commit (_type, _payload, _options) {
  // check object-style commit
  const {
   type,
   payload,
   options
  } = unifyObjectStyle(_type, _payload, _options)

  const mutation = { type, payload }
  const entry = this._mutations[type]
  if (!entry) {
   if (process.env.NODE_ENV !== 'production') {
    console.error(`[vuex] unknown mutation type: ${type}`)
   }
   return
  }
  // 用来修改state
  this._withCommit(() => {
   entry.forEach(function commitIterator (handler) {
    handler(payload)
   })
  })
  this._subscribers.forEach(sub => sub(mutation, this.state))

  if (
   process.env.NODE_ENV !== 'production' &&
   options && options.silent
  ) {
   console.warn(
    `[vuex] mutation type: ${type}. Silent option has been removed. ` +
    'Use the filter functionality in the vue-devtools'
   )
  }
 }

this._withCommit来修改state,其源代码如下

_withCommit (fn) {
 const committing = this._committing
 this._committing = true
 fn()
 this._committing = committing
}

其中_withCommit函数的参数fn是修改state的函数,在执行fn函数前,将this._committing置为true,理由是在源代码的251行resetStoreVM函数中判断严格模式的代码,如下:

if (store.strict) {
 enableStrictMode(store)
}

当 vuex设置为严格模式, 执行enableStrictMode函数, 源码如下:

function enableStrictMode (store) {
 // $watch 函数来观察 state的变化
 store._vm.$watch(function () { return this._data.$$state }, () => {
 // tate变化时,调用 assert函数
 if (process.env.NODE_ENV !== 'production') {
 // 判断 store._committing
  assert(store._committing, `do not mutate vuex store state outside mutation handlers.`)
 }
 }, { deep: true, sync: true })
}

当store._committing(this._committing)不为true,就会报出异常。
所以,当不是触发mutation来修改state, 就不会执行commit函数,也不会执行_withcommit函数,this._committing = true不会执行,当执行 enableStrictMode 时,会执行 assert 函数,这时store._committing为false,就会报出异常。

回归标题action可以修改state吗

不开启严格模式的情况下可以,但是不提倡。

综上所述,经测试得知可以修改并修改成功,但是严格模式下控制台会抛异常且action是异步的,不方便DevTool 调试

结语

我们开发要严格按照官方文档开发,避免不必要的错误产生。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
js实现开启密码大写提示
Dec 21 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 #Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 #Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 #jQuery
webpack常用配置总览(小结)
Nov 18 #Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 #Javascript
重置Redux的状态数据的方法实现
Nov 18 #Javascript
JavaScript数值类型知识汇总
Nov 17 #Javascript
You might like
PHP文件上传主要代码讲解
2013/09/30 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
utf8的编码算法 转载
2006/12/27 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
2010/11/16 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
python2.7实现邮件发送功能
2018/12/12 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
关于旷工的检讨书
2014/02/02 职场文书
汉语言文学职业规划
2014/02/14 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
军人离婚协议书样本
2014/10/21 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技