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 相关文章推荐
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 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
谈一谈收音机的高放电路
2021/03/02 无线电
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
js 实现 input type="file" 文件上传示例代码
2013/08/07 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
JS常见算法详解
2017/02/28 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
以windows service方式运行Python程序的方法
2015/06/03 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
使用matplotlib画散点图的方法
2018/05/25 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
python循环输出三角形图案的例子
2019/11/22 Python
python 字典访问的三种方法小结
2019/12/05 Python
实例代码讲解Python 线程池
2020/08/24 Python
运行Python编写的程序方法实例
2020/10/21 Python
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
幼师自荐信
2013/10/26 职场文书
网页美工求职信范文
2014/04/17 职场文书
服务承诺书范文
2014/05/19 职场文书
市场营销专业求职信
2014/06/17 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
办公室禁烟通知
2015/04/23 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
原生JS中应该禁止出现的写法
2021/05/05 Javascript