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 相关文章推荐
JS Timing
Apr 21 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
vue实现分页的三种效果
Jun 23 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python中装饰器级连的使用方法示例
2017/09/29 Python
Python subprocess库的使用详解
2018/10/26 Python
值得收藏的10道python 面试题
2019/04/15 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
电子商务毕业生求职信
2013/11/10 职场文书
公司员工检讨书
2014/02/08 职场文书
矿泉水广告词
2014/03/20 职场文书
初中学生评语大全
2014/04/24 职场文书
安全保证书怎么写
2015/02/28 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python