VUE 实现购物车或者消息中心未读消息数量的实时监听
涉及到商城,平台等项目一般都会有实时数据的更新问题,比如这种:下面是我的处理方式:全局绑定一个方法Vue.prototype.$addStorageEvent = function (type, key, data) {if (type === 1) {// 创建一个StorageEvent事件var newStorageEvent = document.creat...
·
涉及到商城,平台等项目一般都会有实时数据的更新问题,比如这种:
下面是我的处理方式:全局绑定一个方法
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是后台传过来的未读消息数量
更多推荐
已为社区贡献3条内容
所有评论(0)