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 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 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
ThinkPHP 404页面的设置方法
2015/01/14 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
行政主管职责范本
2014/03/07 职场文书
手机银行营销方案
2014/03/14 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
反腐倡廉标语
2014/06/24 职场文书
农村文化建设标语
2014/10/07 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
死亡诗社观后感
2015/06/05 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS