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是后台传过来的未读消息数量
发布了25 篇原创文章 · 获赞 0 · 访问量 1010
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览