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 validation插件表单验证的一个例子
Mar 03 Javascript
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
微信小程序排坑指南详解
May 23 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 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
15种PHP Encoder的比较
2007/03/06 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
PHPMailer发送邮件
2016/12/28 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
js常用排序实现代码
2010/12/28 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
Angular(5.2->6.1)升级小结
2018/12/27 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
详解JavaScript中的Object.is()与"==="运算符总结
2020/06/17 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
python实现绘制树枝简单示例
2014/07/24 Python
python实现ipsec开权限实例
2014/11/11 Python
Python用threading实现多线程详解
2017/02/03 Python
Python中optparser库用法实例详解
2018/01/26 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
毕业生找工作的自我评价
2013/10/18 职场文书
电子商务个人自荐信
2013/12/12 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
2015年领班工作总结
2015/04/29 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis