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 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Python 面向对象部分知识点小结
2020/03/09 Python
python相对企业语言优势在哪
2020/06/12 Python
浅析Python 多行匹配模式
2020/07/24 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
暑期实践思想汇报
2014/01/06 职场文书
十佳护士获奖感言
2014/02/18 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
用Python生成会跳舞的美女
2022/01/18 Python