[bug]——vue 组件状态外置引发的一个 bug
背景
在编写 .vue 组件时,可以将状态外置来获取一些额外的好处,譬如有这么一个组件(global-components.vue):
<template>
<div>
<c-popup
:title="uiState.popup.title"
:content="uiState.popup.content"
:visible="uiState.popup.visible"
></c-popup>
<c-notify
:type="uiState.notify.type"
:message="uiState.notify.message"
:visible="uiState.notify.visible"
></c-notify>
</div>
</template>
<script>
import store from './store';
export default {
data() {
return {
uiState: store.state
}
},
}
</script>
将组件的状态外置,即 store.js 如下:
export default {
state: {
popup: {},
notify: {}
},
setState (key, value) {
this.state[key] = value;
},
clearState () {
this.state = {};
}
};
组件状态外置有两个好处:
- 单独的 js 文件,可以享受编辑器的代码提示功能
- 可以在任意地方,引入 store.js 就可以修改组件的内部状态
然而这都不是今天讨论的重点,重点是,上面的代码隐藏着一个 bug。
bug 回放
在 store.js 中,我们通过方法 setState 设置组件的状态,通过 clearState 重置所有组件状态。
对于全局组件,我们希望在路由切换的时候关闭这些组件,自然,可以使用 clearState 来达到这一目的。
一切都很美好。
某天,组里一个同学发现,前进一个页面后再返回,调用 setState,组件状态没有发生变化。
bug 修复
显然,调用 setState 肯定会更改 state,但 vue 为什么没有观察到这个变化呢?我们再看下 data:
data() {
return {
uiState: store.state
}
}
嗯,这肯定没有问题。
在 bug 回放中,我们看到,因为路由切换才导致了这个问题,于是猜测是 clearState 的锅——我们粗暴的使用“=”重置 state 为一个新的空对象,而 vue 还保留着原来的那个 state 对象。
更改 clearState 的实现:
clearState () {
Object.keys(this.state).forEach(key => {
this.state[key] = {};
})
}
所以,我们能学到点什么教训/经验?
水一篇博文?手动狗头
[bug]——vue 组件状态外置引发的一个 bug的更多相关文章
- webpack单独构建scss文件与.vue组件里构建scss的一个坑
在入口main.js里构建scss是通过引入模块的方式 import './assets/_reset.scss'; import './assets/_flex.scss'; import './a ...
- vue组件自定义属性命名
今天自己写vue组件demo的时候发现一个有趣的问题:vue组件自定义属性命名不支持用驼峰命名! 上面图示为正常情况下的自定义属性,没有任何问题. 但是一旦出现自定义属性中包含了大写字母,则如下图所示 ...
- React: React的组件状态机制
一.简介 在React中,有两个核心的默认属性,分别是state和props.state会记录组件的状态,React根据状态的变化,会对界面做相应的调整或渲染.props则是数据流向属性,React通 ...
- c#版阿里云oss上传——基于layui、pupload的oss 后端web端直传的vue组件
废话前言 去年,做项目用到oss上传,度娘上逛了一圈写了个前后端代码结合的c#版oss上传. 今年又要用到oss上传时发现很难复用,复用改动的范围太大,显然这个轮子不合格.于是想了下,花了一天的时间( ...
- vue组件data函数
vue组件data通常定义为一个函数并return一个对象,对象中定义的就是组件数据,当然定义数据还有props.computed等方式. data如果直接定义为对象data: {message: ' ...
- 聊聊vue组件开发的“边界把握”和“状态驱动”
vue有着完整的组件化开发机制,但是官网只给了开发的方式,对于开发规范以及组件化开发的最佳实践,还需要我们来摸索.本文就平时开发中的经验来谈谈“把握边界”和“状态驱动”这两个话题. 边界把握 边界把握 ...
- vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制)
vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制) 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 .vuex就是为了解决组件通信问题的. ...
- vue组件化开发-vuex状态管理库
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
- 如何写好一个vue组件,老夫的一年经验全在这了【转】 v-bind="$attrs" 和 v-on="$listeners"
如何写好一个vue组件,老夫的一年经验全在这了 一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能 Vue 组件的 API 来自三部分——prop.事件和插槽: prop 允许 ...
随机推荐
- 项目(二) esp32-cam 网页图像人脸
https://randomnerdtutorials.com/esp32-cam-video-streaming-face-recognition-arduino-ide/ ESP32-CAM Pi ...
- three arrays HDU - 6625 (字典树)
three arrays \[ Time Limit: 2500 ms \quad Memory Limit: 262144 kB \] 题意 给出 \(a\),\(b\) 数组,定义数组 \(c[i ...
- JS的ES6的Generator
JS的ES6的Generator 1.Generator函数的概念: ES6提供的解决异步编程的方案之一,现在已经不怎么用了被淘汰了. Generator函数是一个状态机,内部封装了不同状态的数据. ...
- from表格
目录 from 功能: 表单元素 表单工作原理: input 属性说明: select标签 属性说明: label标签 属性说明: from 功能: 表单用于向服务器传输数据,从而实现用户与Web服务 ...
- windows自动修复失败,无法启动
Windows10操作系统于2015年7月29日正式发布,此后,win10也就成了新上市的笔记本电脑或者台式机电脑的预装操作系统!win10系统给我们带了全新的体验,当然也带来了一定的烦恼!就拿win ...
- svn报错:[Previous operation has not finished; run 'cleanup' if it was interrupted] 的排错过程
今天在打开某一文档的情况下,使用SVN更新文档,在更新的过程中报错,提示需要执行clean up,果断右键执行clean up,又提示一个新的错误:"Previous operation h ...
- RMQ问题(超详细!!!)
一.简介 RMQ是询问某个区间内的最大值或最小值,暴力解法对每个询问区间用循环找最值,当n.q>10000会TLE. 常用RMQ的求解方法——ST算法. ST算法通常用在要多次询问一些区间的最值 ...
- Pycharm 导入Selenium,出现错误
问题 导入Selenium,出现红色波浪线. 解决 点击Pycharm左上角File>setting>Project Interpreter,双击PIP,搜索栏搜索Selenium 然后选 ...
- IIS基本设置、回收机制、性能、并发、安全性
通常把站点发布到IIS上运行正常后,很少会去考虑IIS提供的各种参数,如何配置才是最适合当前站点运行需要的?这篇文章,从基本设置.回收机制.性能.并发.安全性等IIS设置讲解应当如何优化. 先来“II ...
- SpringBoot之文件上传体积过大问题(解决方案)
错误信息如下(关键): org.apache.tomcat.util.http.fileupload.FileUploadBase$SizeLimitExceededException: the re ...