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 序列化对象实现代码
Dec 18 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
五句话帮你轻松搞定js原型链
Dec 09 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版本实现代码
2012/09/15 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
python定时截屏实现
2020/11/02 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
大学生简历的个人自我评价
2013/12/04 职场文书
管理失职检讨书
2014/02/12 职场文书
个人担保书格式范文
2014/05/12 职场文书
五一促销活动总结
2014/07/01 职场文书
2014年林业工作总结
2014/12/05 职场文书
论文答辩开场白大全
2015/05/27 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python