怎么监听sessionStorage的key变化

Vue.prototype.resetSetItem = function (key, newVal) {
  if (key === 'sysId') {
    // 创建一个StorageEvent事件
    var newStorageEvent = document.createEvent('StorageEvent')
    const storage = {
      setItem: function (k, val) {
        sessionStorage.setItem(k, val)

        // 初始化创建的事件
        newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null)

        // 派发对象
        window.dispatchEvent(newStorageEvent)
      }
    }
    return storage.setItem(key, newVal)
  }
}

组件内部使用

改变key时调用

this.resetSetItem('sysId', data.sysId)

需要监听的地方

created() {
  this.getListHeader()
  window.addEventListener('setItem', () => {
    this.getListHeader()
  })
},

methods: {

getListHeader() {
  if (getSessionStorage('sysId') || getCookie('sysId')) {
    this.backEndLog[0].children = this.backEndLogChildFirst
  } else {
    this.backEndLog[0].children = this.backEndLogAllChildFirst
  }
}

}

注意：

vue是单页面应用，window需要在当前页面移除，否则会在其他路由也有监听。resetSetItem慎用。

created() {
  this.getListHeader()
  window.addEventListener('setItem', this.changeSysId)
},
destroyed() {
  window.removeEventListener('setItem', this.changeSysId)
},
changeSysId(e) {
  if (e.key === 'sysId') {
    this.getListHeader()
  }
},