vue2多标签页通信(标签页通信 , 新增页新增数据后, 列表页刷新)

1. 列表页面 , 在mounted钩子监听 , 如果有更新那就刷新列表 , 同时设置监听变量为false ,告诉浏览器我已刷新列表 

 mounted() {
    window.addEventListener('storage', (e) => {
      if (e.key === 'tagState') {
      this.getList() //刷新列表
      localStorage.setItem('tagState', JSON.stringify(false)) //变成false , 可以来回监听
      //要做的操作
      }
    })
}

2.新增页面 添加完成后 , 把这个状态变为true , 告诉浏览器我添加完成了

submit(){

            localStorage.setItem('tagState', JSON.stringify(true))

}

这样就能通过监听localstorage  , 实现多个标签页通信 ,  注意组件销毁后移除事件哦 , 优化性能

  //组件销毁后钩子函数
destroyed() {
    window.removeEventListener('storage', this.getNewData, true)
  },