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编程起步(第七课)
Jan 10 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
require.js的用法详解
Oct 20 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
写gulp遇到的ES6问题详解
Dec 03 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代码
2007/03/08 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
Python中方法链的使用方法
2016/02/23 Python
python实现下载文件的三种方法
2017/02/09 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
基于Python的PIL库学习详解
2019/05/10 Python
python微信公众号开发简单流程实现
2020/03/09 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
初一英语教学反思
2014/01/11 职场文书
房地产开发项目建议书
2014/05/16 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
年底个人总结范文
2015/03/10 职场文书
新教师教学工作总结
2015/08/12 职场文书