实现同步未读消息条数

需求描述： 模块内的未读信息被读后，头部的未读信息条数要跟着变动。

//home
  <div @click="handleMessage">
          <el-badge
            v-if="messageData.length != 0"
            :value="messageData.length"
            :max="99"
            :class="messageData.length <= 99 ? 'badge' : 'other'"
          >
            <i class="el-icon-message-solid icon main-color"></i>
          </el-badge>
          <div v-else class="all-massage">
            <i class="el-icon-message-solid main-color"></i>
          </div>
  </div>

关键操作：在utils.js里面设置window添加时间

//window下添加时间，通知信息数量变化
const EVENT_MESSAGENUM = "EVENT_MESSAGENUM";

//home
  created() {
    let _this = this;
    this.getMenu();
    this.queryCount();
    window[utils.EVENT_MESSAGENUM] = function() {
      _this.queryCount();
    };
  },
  method(){
      // 获取铃铛未读消息数量
    queryCount() {
      messageList().then(res => {
        // console.log(res,'头部请求')
        if (res.data.code == 200) {
          let messageAll = res.data.data.list;
          this.messageData = messageAll.filter(e => {
            return e.readed == 1;
          });
        }
      });
    }
  }

关键操作： 在标记已读的时候，触发window事件

    // 标记全部为已读
    toMarkRead() {
      this.http
        .post(`${this.interfacePrefix}markAllMessageAsReaded`)
        .then(res => {
          if (res.data.code == 200) {
            window.top[utils.EVENT_MESSAGENUM]();
            this.$message.success(res.data.msg);
            this.handleFilter();
          }
        });
    }