[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 允许 ...
随机推荐
- new String("123") 创建了几个对象?
String 对象可谓再熟悉不过了,与此相关的面试题经常会引出内存性能优化的问题,本篇主要以 new String("123") 创建了几个对象为例记录. 一.你能回答正确吗 St ...
- js-Cannot read property 'innerHTML' of null
原因:1.$('#xxx') 或$('.xxx')不存在 2.$('#xxx')或$('.xxx')的值为空
- random库
伪随机数的原因: random库中函数主要用于产生各种分布的伪随机数序列.random库中的随机函数是按照一定算法模拟产生的,其概率是确定的.可见的,所以被称为伪随机数.而真正意义上的随机数是按照实验 ...
- Apache ServiceComb Pack 微服务分布式数据最终一致性解决方案
https://github.com/OpenSagas-csharp/servicecomb-pack-csharp Saga基本使用指南 使用前置条件说明 如果还有同学对Saga还不甚了解的同学, ...
- GoCN每日新闻(2019-11-06)
GoCN每日新闻(2019-11-06) GoCN每日新闻(2019-11-06) 1. 使用构建标签分离你的测试文件 https://mickey.dev/posts/go-build-tags-t ...
- shell 查找字符串中字符出现的位置
#!/bin/bash a="The cat sat on the mat" test="cat" awk -v a="$a" -v b=& ...
- JS简单获取当前日期时间的方法(yyyy-MM-dd hh:mm:ss)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- Http协议以及Httpclient
一.HTTP之请求消息Request 客户端发送一个HTTP请求到服务器的请求消息包括以下格式: 请求行(request line).请求头部(header).空行和请求数据四个部分组成. Http请 ...
- 使用analyze命令统计信息
① 搜集和删除索引.表和簇的统计信息② 验证表.索引和簇的结构③ 鉴定表和簇和行迁移和行链接针对analyze的搜集和删除统计信息功能而言Oracle推荐使用DBMS_STATS包来代替analyze ...
- pd.ExcelWriter(to_excel)保存结果到已存在的excel文件中
网易云课堂该课程链接地址 https://study.163.com/course/courseMain.htm?share=2&shareId=400000000398149&cou ...