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是后台传过来的未读消息数量

• 点赞
• 收藏
• 分享
• 文章举报