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 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
js实现左右两侧浮动广告
Jul 09 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
Vue3中的Refs和Ref详情
Nov 11 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版(1)
2006/10/09 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
jquery自定义组件实例详解
2020/12/31 jQuery
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
秘书行业自我鉴定范文
2013/12/30 职场文书
教师节商场活动方案
2014/02/13 职场文书
函授生自我鉴定
2014/03/25 职场文书
美术社团活动总结
2014/06/27 职场文书
授权收款委托书范本
2014/10/10 职场文书
超市督导岗位职责
2015/04/10 职场文书
在职证明书模板
2015/06/15 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript
docker 制作mysql镜像并自动安装
2022/05/20 Servers