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 相关文章推荐
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
vue通过数据过滤实现表格合并
Nov 30 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
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下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
header导出Excel应用示例
2014/01/24 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
微信支付的开发流程详解
2016/09/13 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
Python中实现结构相似的函数调用方法
2015/03/10 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
python中必要的名词解释
2019/11/20 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
小学生清明节演讲稿
2014/09/05 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
MySQL transaction事务安全示例讲解
2022/06/21 MySQL