涉及到商城,平台等项目一般都会有实时数据的更新问题,比如这种:
在这里插入图片描述
下面是我的处理方式:全局绑定一个方法

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

前往低代码交流专区

更多推荐