背景

在编写 .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的更多相关文章

  1. webpack单独构建scss文件与.vue组件里构建scss的一个坑

    在入口main.js里构建scss是通过引入模块的方式 import './assets/_reset.scss'; import './assets/_flex.scss'; import './a ...

  2. vue组件自定义属性命名

    今天自己写vue组件demo的时候发现一个有趣的问题:vue组件自定义属性命名不支持用驼峰命名! 上面图示为正常情况下的自定义属性,没有任何问题. 但是一旦出现自定义属性中包含了大写字母,则如下图所示 ...

  3. React: React的组件状态机制

    一.简介 在React中,有两个核心的默认属性,分别是state和props.state会记录组件的状态,React根据状态的变化,会对界面做相应的调整或渲染.props则是数据流向属性,React通 ...

  4. c#版阿里云oss上传——基于layui、pupload的oss 后端web端直传的vue组件

    废话前言 去年,做项目用到oss上传,度娘上逛了一圈写了个前后端代码结合的c#版oss上传. 今年又要用到oss上传时发现很难复用,复用改动的范围太大,显然这个轮子不合格.于是想了下,花了一天的时间( ...

  5. vue组件data函数

    vue组件data通常定义为一个函数并return一个对象,对象中定义的就是组件数据,当然定义数据还有props.computed等方式. data如果直接定义为对象data: {message: ' ...

  6. 聊聊vue组件开发的“边界把握”和“状态驱动”

    vue有着完整的组件化开发机制,但是官网只给了开发的方式,对于开发规范以及组件化开发的最佳实践,还需要我们来摸索.本文就平时开发中的经验来谈谈“把握边界”和“状态驱动”这两个话题. 边界把握 边界把握 ...

  7. vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制)

    vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制) 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 .vuex就是为了解决组件通信问题的. ...

  8. vue组件化开发-vuex状态管理库

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...

  9. 如何写好一个vue组件,老夫的一年经验全在这了【转】 v-bind="$attrs" 和 v-on="$listeners"

    如何写好一个vue组件,老夫的一年经验全在这了 一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能 Vue 组件的 API 来自三部分——prop.事件和插槽: prop 允许 ...

随机推荐

  1. 项目(二) esp32-cam 网页图像人脸

    https://randomnerdtutorials.com/esp32-cam-video-streaming-face-recognition-arduino-ide/ ESP32-CAM Pi ...

  2. three arrays HDU - 6625 (字典树)

    three arrays \[ Time Limit: 2500 ms \quad Memory Limit: 262144 kB \] 题意 给出 \(a\),\(b\) 数组,定义数组 \(c[i ...

  3. JS的ES6的Generator

    JS的ES6的Generator 1.Generator函数的概念: ES6提供的解决异步编程的方案之一,现在已经不怎么用了被淘汰了. Generator函数是一个状态机,内部封装了不同状态的数据. ...

  4. from表格

    目录 from 功能: 表单元素 表单工作原理: input 属性说明: select标签 属性说明: label标签 属性说明: from 功能: 表单用于向服务器传输数据,从而实现用户与Web服务 ...

  5. windows自动修复失败,无法启动

    Windows10操作系统于2015年7月29日正式发布,此后,win10也就成了新上市的笔记本电脑或者台式机电脑的预装操作系统!win10系统给我们带了全新的体验,当然也带来了一定的烦恼!就拿win ...

  6. svn报错:[Previous operation has not finished; run 'cleanup' if it was interrupted] 的排错过程

    今天在打开某一文档的情况下,使用SVN更新文档,在更新的过程中报错,提示需要执行clean up,果断右键执行clean up,又提示一个新的错误:"Previous operation h ...

  7. RMQ问题(超详细!!!)

    一.简介 RMQ是询问某个区间内的最大值或最小值,暴力解法对每个询问区间用循环找最值,当n.q>10000会TLE. 常用RMQ的求解方法——ST算法. ST算法通常用在要多次询问一些区间的最值 ...

  8. Pycharm 导入Selenium,出现错误

    问题 导入Selenium,出现红色波浪线. 解决 点击Pycharm左上角File>setting>Project Interpreter,双击PIP,搜索栏搜索Selenium 然后选 ...

  9. IIS基本设置、回收机制、性能、并发、安全性

    通常把站点发布到IIS上运行正常后,很少会去考虑IIS提供的各种参数,如何配置才是最适合当前站点运行需要的?这篇文章,从基本设置.回收机制.性能.并发.安全性等IIS设置讲解应当如何优化. 先来“II ...

  10. SpringBoot之文件上传体积过大问题(解决方案)

    错误信息如下(关键): org.apache.tomcat.util.http.fileupload.FileUploadBase$SizeLimitExceededException: the re ...