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