消息模块思路

今天写完了消息模块，大致写下思路。

背景

由于之前后台组长要求，不允许使用websocket做实时消息监控，后台组长要求前端使用定时器，定时发起查询条数请求

铃铛处是消息模块的入口，且工作台处有消息的部分通知。
技术栈是vue2+antdv

需求

没有生成消息的情况下，定时一分钟请求一次接口，如果将通知消息与告警消息的未读消息数的总和放至铃铛的未读消息数处，无则未读数不显示
在进行了消息详情读取，或者意见反馈表单填写完毕后等操作成功后，要立即调用用于请求未读消息条目数的接口方法

代码推演

父页面中的铃铛，子页面(消息模块)中的操作会触发改变父页面中的已读消息数方法，

思路

消息模块的核心变量是vuex中的isFreshMsg，组件使用watch+immediate方式实时监听这个来自vuex-state的变量，检测随即触发组件级方法，

1.在vuex中声明一个布尔变量，初始为true，mutations声明修改这个变量的方法：

// vuex
state:{
  isFreshMsg:true// 决定是否立即刷新
},
mutations:{
//用于修改isFreshMsg状态
    setChangeIsFreshMsg(state,newState){
      console.log('newState :>> ', newState);
      state.isFreshMsg = newState
    },
}

2.父页面中，实时检测isFreshMsg，一旦检测成功，便触发方法

//layout.vue（父页面）
 data(){
   return {
      timer: null //定时器
    }
 
 }
 watch:{
      '$store.state.isFreshMsg':{
       handler(newName, oldName) {
        console.log("触发layout页监听,值为：=》",newName);
        this.setIntervalGetListNO();
      },
      immediate: true,//页面初加载时就监听
    }
}
methods:{
//setIntervalGetListNO触发方式有两种: 源自vuex里的isFreshMsg一旦设置为true则立即更新数据，否则，每隔一分钟定时向后台请求数据
  setIntervalGetListNO(){
        //如果为true，立即刷新数据
        if (this.$store.state.isFreshMsg) {
            //如果timer有值，需要先清空定时器然后再刷新数据，否则，间隔请求时间会越来越短
          if (this.timer) clearInterval(this.timer);
          this.getWarnNo();
          this.getNoticeNO();
          //立即刷新后，将isFreshMsg设置为false，会再次触发watch
          this.setChangeIsFreshMsg(false);
        } else {
          // 为false，变为固定态，每隔一分钟定时请求
          this.timer = setInterval(() => {
            this.getWarnNo();
            this.getNoticeNO();
          }, 60000);
        }
  }
}

解析： 基于vuex中的isFreshMsg，在layout的watch使用immediate实时监听，由于初始为true，所以在刚进入此页面时会触发一次刷新请求，随后，将其设置为false后会再次触发watch,随即会再次触发setIntervalGetListNO，此时由于该值为false，timer被赋值为间隔一分钟就会请求刷新一次数据的定时器

应用

作为后台管理系统的共有父页面， 在子页面进行的任何需要更改isFreshMsg的值的动作都可以监听到，因而，如果有需要进行立即刷新请求数据的动作，只需要在子组件内部调用vuex的setChangeIsFreshMsg(true)即可
举个栗子

// notice/index.vue
methods:{
 ...mapMutations(["setChangeIsFreshMsg"]),
    getNoticeDetail(){
      //读取通知详情时的操作
      ......
      //在打开该条消息详情时，要标记此消息为已读，同时刷新layout消息条目数
      this.setChangeIsFreshMsg(true)
    }

}

原理同上，不再赘述