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 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
jQuery中的select操作详解
Nov 29 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 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中函数rand和mt_rand的区别比较
2012/12/26 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
JS 时间显示效果代码
2009/08/23 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
详谈js模块化规范
2017/07/07 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
javascript的this关键字详解
2019/05/20 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
python映射列表实例分析
2015/01/26 Python
安装dbus-python的简要教程
2015/05/05 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
Django开发中复选框用法示例
2018/03/20 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
大学三年计划书范文
2014/04/30 职场文书
企业年检委托书范本
2014/10/14 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python