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 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
jquery实现全屏滚动
Dec 28 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
创建nuxt.js项目流程图解
Mar 13 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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
python3实现表白神器
2019/04/09 Python
如何运行带参数的python脚本
2019/11/15 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
运动会稿件100字
2014/02/21 职场文书
三年级学生评语
2014/04/23 职场文书
师德演讲稿范文
2014/05/06 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
服务标语口号
2014/07/01 职场文书
共青团员自我评价
2015/03/10 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
学校教学工作总结2015
2015/05/19 职场文书
python 破解加密zip文件的密码
2021/04/22 Python