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 实现GridView异步排序、分页的代码
Feb 06 Javascript
js浮动图片的动态效果
Jul 10 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
js实现进度条的方法
Feb 13 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
javascript解析json格式的数据方法详解
Aug 07 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 YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
javascript分页代码(当前页码居中)
2012/09/20 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
python实现备份目录的方法
2015/08/03 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
python监控nginx端口和进程状态
2019/09/06 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
技能比武方案
2014/05/21 职场文书
供应链金融服务方案
2014/05/25 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
期末个人总结范文
2015/02/13 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
证婚人致辞精选
2015/07/28 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
python本地文件服务器实例教程
2021/05/02 Python
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python