VUE 实现购物车或者消息中心未读消息数量的实时监听

涉及到商城，平台等项目一般都会有实时数据的更新问题，比如这种：

下面是我的处理方式：全局绑定一个方法

Vue.prototype.$addStorageEvent = function (type, key, data) {if (type === 1) {// 创建一个StorageEvent事件var newStorageEvent = document.createEvent('StorageEvent')const storage = {setItem: function (k, val) {localStorage.setItem(k, val)// 初始化创建的事件newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null)// 派发对象window.dispatchEvent(newStorageEvent)}}return storage.setItem(key, data)} else {// 创建一个StorageEvent事件var newStorageEvent1 = document.createEvent('StorageEvent')const storage = {setItem: function (k, val) {sessionStorage.setItem(k, val)// 初始化创建的事件newStorageEvent1.initStorageEvent('setItem', false, false, k, null, val, null, null)// 派发对象window.dispatchEvent(newStorageEvent1)}}return storage.setItem(key, data)}
}

然后在需要获取到该数据（或者用户操作造成该数据改变）的时候调用该方法：

this.$addStorageEvent(1, "speedInfo", this.speedInfo) // speedInfo是后台传过来的未读消息数量

VUE 实现购物车或者消息中心未读消息数量的实时监听相关推荐

vue动态获取元素距离页面顶部的高度_VUE如何实时监听元素距离顶部高度
VUE如何实时监听元素距离顶部高度发布时间:2020-07-30 09:09:43 来源:亿速云阅读:150 作者:小猪这篇文章主要讲解了VUE如何实时监听元素距离顶部高度,内容清晰明了,对此有 ...
java 未读消息_javaweb未读消息提醒
JavaWeb摸底检测试题_其它_职业教育_教育专区.. . . . 网页开发基... 下列选项中,不是标记属性的是( d ) A: src B: alt C: width D: href Java ...
Vue项目中实现消息提示/报警/未读消息（铃铛加小圆点闪烁效果）
在项目开发过程中,可能需要实现以下场景:未读消息提示.报警信息.消息通知等,这些功能往往是在页面的右上角设置一个铃铛,在铃铛或者图标的右上角显示消息数并做呼吸灯效果显示下面分享一下这类效果的实现方法 ...
前端学习（2645）：懂代码之header表头页之未读消息
<div class="btn-bell"><el-tooltipeffect="dark":conte ...
android 应用图标角标显示未读消息
Android桌面角标的适配确实是非常坑爹的需求.原生系统根本就没有这个功能,国内很多厂家效仿ios都自己定义了该功能.Android程序员就很苦逼,要适配很多机型.建议万不得已情况下还是不要进行这项 ...
app里未读消息已读、未读是怎么设计的？
也不知道大家目前都用的java编程软件有哪些,毕竟在应用程序中,未读和已读消息的设计取决于应用程序的需求和目标.下面是一些常见的设计模式: 一.简单的未读/已读标记简单的未读/已读标记:这是最常见的 ...
android仿微信实现消未读消息数在tab栏提醒
最近公司有个项目,要仿照微信的未读消息数提醒,提醒用户通知公告的未读数,找了几个都不太好用,后来找前辈咨询,给了一个库,感觉特别实用,在这里分享给大家. 首先给大家看项目的原型图截图: 然后是代码实现 ...
android底部导航栏带消息数的框架,GitHub - BarkSheep/Android-NavMenuLayout: 一个底部导航栏, 实现了显示未读消息数, 显示红点等效果的封装...
Android-NavMenu-master 一个底部导航栏, 实现了显示未读消息数, 显示红点等效果的封装. 添加依赖 1. 在项目根目录的 build.gradle 中添加 allprojects ...
Android自定义控件：类QQ未读消息拖拽效果
QQ的未读消息,算是一个比较好玩的效果,趁着最近时间比较多,参考了网上的一些资料之后,本次实现一个仿照QQ未读消息的拖拽小红点: 首先我们从最基本的原理开始分析,看一张图: 这个图该怎么绘制呢?实际上 ...

VUE 实现购物车或者消息中心未读消息数量的实时监听

VUE 实现购物车或者消息中心未读消息数量的实时监听相关推荐

最新文章

热门文章