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模拟超链接点击效果代码
Apr 21 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
js通过canvas生成图片缩略图
Oct 02 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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
DIY实用性框形天线
2021/03/02 无线电
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
玩转图像函数库―常见图形操作
2006/09/03 PHP
php URL验证正则表达式
2011/07/19 PHP
php 短链接算法收集与分析
2011/12/30 PHP
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
js实现微博发布小功能
2017/01/12 Javascript
React快速入门教程
2017/01/17 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
Python3基础之基本数据类型概述
2014/08/13 Python
Python实现简单的可逆加密程序实例
2015/03/05 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
Windows下安装Scrapy
2018/10/17 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
公司同意接收函
2014/01/13 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
通信工程专业求职信
2014/06/04 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
师德培训心得体会2016
2016/01/09 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技