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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
Extjs入门之动态加载树代码
Apr 09 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
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安全配置 如何配置使其更安全
2011/12/16 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Python合并多个Excel数据的方法
2018/07/16 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
Jupyter加载文件的实现方法
2020/04/14 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
python导入库的具体方法
2020/06/18 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
大学生学习生活的自我评价
2013/11/01 职场文书
机关门卫岗位职责
2013/12/30 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
医院护士工作检讨书
2014/10/26 职场文书
2015年商场工作总结
2015/04/27 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL