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打印网页部分内容的脚本
Nov 17 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 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
基于xcache的配置与使用详解
2013/06/18 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
php表单处理操作
2017/11/16 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
Python与Redis的连接教程
2015/04/22 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
Python装饰器用法实例总结
2018/05/26 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
python如何导入依赖包
2020/07/13 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
查摆问题自我剖析材料
2014/08/18 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
庐山导游词
2015/02/03 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
党校培训学习心得体会
2016/01/06 职场文书
golang语言指针操作
2022/04/14 Golang