浅谈vuex为什么不建议在action中修改state


Posted in Javascript onFebruary 02, 2020

背景

在最近的一次需求开发过程中,有再次使用到Vuex,在状态更新这一方面,我始终遵循着官方的“叮嘱”,谨记“一定不要在action中修改state,而是要在mutation中修改”;于是我不禁产生了一个疑问:Vuex为什么要给出这个限制,它是基于什么原因呢?带着这个疑问我查看Vuex的源码,下面请大家跟着我的脚步,来一起揭开这个问题的面纱。

一起阅读源码吧~

1.首先我们可以在src/store.js这个文件的Store类中找到下面这段代码

// ...
this.dispatch = function boundDispatch (type, payload) {
 return dispatch.call(store, type, payload)
}
this.commit = function boundCommit (type, payload, options) {
 return commit.call(store, type, payload, options)
}
// ...

上面是Vuex两个最核心的API:dispatch & commit,它们是分别用来提交action和mutation的

那么既然我们今天的目的是为了“了解为什么不能在action中修改state”,所以我们就先看看mutation是怎样修改state的,然而mutation是通过commit提交的,所以我们先看一下commit的内部实现

commit&mutation

2.commit方法的核心代码大致如下:

commit (_type, _payload, _options) {
  // ...
  this._withCommit(() => {
   entry.forEach(function commitIterator (handler) {
    handler(payload)
   })
  })
  // ...
}

不难看出,Vuex在commit(提交)某种类型的mutation时,会先用_withCommit包裹一下这些mutation,即作为参数传入_withCommit;那么我们来看看_withCommit的内部实现(ps:这里之所以说”某种类型的mutation“,是因为Vuex的确支持声明多个同名的mutation,不过前提是它们在不同的namespace下;action同理)

3._withCommit方法的代码如下:

_withCommit (fn) {
  const committing = this._committing
  this._committing = true
  fn()
  this._committing = committing
 }

是的,你没有看错,它真的只有4行代码;这里我们注意到有一个标志位_committing,在执行fn前,这个标志位会被置为true,这个点我们先记下,一会儿会用到

4.接下来,我要为大家要介绍的是resetStoreVM这个函数,它的作用是初始化store,它首次被执行是在Store的构造函数中

function resetStoreVM (store, state, hot) {
 // ...
 if (store.strict) {
  enableStrictMode(store)
 }
// ...
}

在这里有一处需要我们注意:resetStoreVM对strict(是否启用严格模式)做了判断,这里假设我们启用严格模式,那么就会执行enableStrictMode这个函数,下面继续来看看它的内部实现

function enableStrictMode (store) {
 store._vm.$watch(function () { return this._data.$$state }, () => {
  if (process.env.NODE_ENV !== 'production') {
   assert(store._committing, `do not mutate vuex store state outside mutation handlers.`)
  }
 }, { deep: true, sync: true })
}

这里对Vue组件实例的state做了监听,一旦监听到变化,就会执行asset(断言),它断言的恰巧就是刚才我让大家记住的那个_committing标志位,那么我们再来看看这个asset做了些什么

5.asset方法在src/util.js这个文件中

export function assert (condition, msg) {
 if (!condition) throw new Error(`[vuex] ${msg}`)
}

这个方法很简单,就是判断第一个参数是否为truly值,如果不为真,就抛出一个异常
到此,我们已简单地了解了commit和mutation的逻辑,下面再来看看dispatch和action

dispatch&action

6.dispatch代码大致如下:

dispatch (_type, _payload) {
  const {
   type,
   payload
  } = unifyObjectStyle(_type, _payload)

  const action = { type, payload }
  const entry = this._actions[type]

 // ...
  const result = entry.length > 1
   ? Promise.all(entry.map(handler => handler(payload)))
   : entry[0](payload)
 // ...
 }

这里我们注意到,当某种类型的action只有一个声明时,action的回调会被当作普通函数执行,而当如果有多个声明时,它们是被视为Promise实例,并且用Promise.all执行,总所周知,Promise.all在执行Promise时是不保证顺序的,也就是说,假如有3个Promise实例:P1、P2、P3,它们3个之中不一定哪个先有返回结果,那么我们仔细思考一下:如果同时在多个action中修改了同一个state,那会有什么样的结果?

其实很简单,我们在多个action中修改同一个state,因为很有可能每个action赋给state的新值都有所不同,并且不能保证最后一个有返回结果action是哪一个action,所以最后赋予state的值可能是错误的

那么Vuex为什么要使用Promise.all执行action呢?其实也是出于性能考虑,这样我们就可以最大限度进行异步操作并发
眼尖的同学可能已经发现在dispatch中并没有看到_committing的身影,就是Vuex对action修改state的限制:当action想要修改state时,因为_committing没有事先被置为true,而导致asset阶段无法通过

但这个限制只限于开发阶段,因为在enableStrictMode函数中,Webpack加入了对环境的判断,如果不是生产环境(也就是开发环境)才会输出asset(断言)这行代码

function enableStrictMode (store) {
 store._vm.$watch(function () { return this._data.$$state }, () => {
  if (process.env.NODE_ENV !== 'production') {
   assert(store._committing, `do not mutate vuex store state outside mutation handlers.`)
  }
 }, { deep: true, sync: true })
}

那么也就是说如果你强行在生产环境中用action修改state,Vuex也不会阻止你,它可能仅仅是给你一个警告;而且按道理来说,如果我们能够保证同一类型的action只有一个声明,那么无论是使用action还是mutation来修改state结果都是一样的,因为Vuex针对这种情况,没有使用Promise.all执行action,所以也就不会存在返回结果先后问题

dispatch (_type, _payload) {
  // ...
  const result = entry.length > 1
   ? Promise.all(entry.map(handler => handler(payload)))
   : entry[0](payload)
  // ...
 }

但是凡是靠人遵守的约定都是不靠谱的,所以我们在平时使用Vuex时,最好还是遵守官方的约束,否则线上代码有可能出现bug,这不是我们所期望的。

结束语

Vuex这一限制其实也是出于代码设计考虑,action和mutation各司其事,本质上也是遵守了“单一职责”原则。以上就是我对“Vuex为什么不允许在action中修改状态“这个问题的分析,希望对大家有所帮助,也欢迎指正

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery ready函数滥用分析
Feb 16 Javascript
JQuery教学之性能优化
May 14 Javascript
js实现拖拽效果
Feb 12 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
微信小程序自定义组件
Aug 16 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 #Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 #Javascript
node 版本切换的实现
Feb 02 #Javascript
vue路由缓存的几种实现方式小结
Feb 02 #Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 #Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 #Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 #jQuery
You might like
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
python处理二进制数据的方法
2015/06/03 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
appium+python adb常用命令分享
2020/03/06 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
前台接待的工作职责
2013/11/21 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
销售顾问工作计划书
2014/09/15 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
如何正确理解python装饰器
2021/06/15 Python
浅谈Vue的computed计算属性
2022/03/21 Vue.js