使用localStorage形成同步锁

    // 订阅mqtt消息通知
    doSubscribe() {
      const { topic, qos } = this.subscription;
      this.client.subscribe(topic, { qos }, (error, res) => {
        if (error) {
          console.log("Subscribe to topics error", error);
          return;
        }
        console.log("Subscribe to topics res", res);
      });
      this.client.on("message", (topic, message) => {
        if (topic === this.subscription.userTopic) {
          let msgObj = JSON.parse(`${message}`);
          console.log(msgObj);
          // 接收消息并弹框
          this.notify(msgObj);
        } else if (topic = this.subscription.trafficTopic) {
          let traffic = JSON.parse(`${message}`);
          // 接收mqtt推送消息时存入一个标识

          const oldTraffic = localStorage.getItem('openNewEvent' + message)
           //  当无标识的时候去set一个标识  并且打开新页签
          if (!oldTraffic) {
            localStorage.setItem('openNewEvent' + message, message)
          

           //  vue中浏览器打开新页签会被拦截  所有需提前打开一个新的空页签 去改变他的地址

            const tempPage = window.open('', '_blank')
            let url = this.$router.resolve({
              path: `/event/addEvent/` + new Date().getTime(),
              query: { phone: traffic }
            });
            const newhref = url.href
            tempPage.location = newhref

          // 当localStorage已有标识不进行处理
          }else{
            console.log('已开启无需再次处理');
          }

当开启多个页签时 多个页签会同时去读取localStorage,其中只要又一个页面的localStorage抢先存入唯一标识 其余的则会走进else方法

在push的页面调用接口时去除localStorage，形成同步锁