如何实时监听vuex里的数据变化,并更新消息提示红点

想实现一个功能，当我们对页面提交操作时，我们的消息图标的右上角会出现一个提示红点。

一开始想到的是用mounted和updated对红点提示进行更新，但是可以发现并不能实时更新，因为mounted和updated是只有当我们触发了提示消息的组件时才会更新

接下来我们可以用到computed和watch对vuex里的数据变化监听
我们已经在state中定义了一个存放消息的数组

 state: {
 //存放我的消息数据
  UserMesssage:[]
  }

返回我们有提示红点的组件页面，

提示红点的组件页面和如何在UserMessage中添加消息，在这里就不写页面样式和方法了，直接说如何监听

computed:{
    //监听vuex的消息数据并返回给watch
    //我们只需要获取UserMessage的长度即可
    watchMyMessage(){
      return this.$store.state.UserMessage.length
    }
  },
  watch: {
    //监听watchMyMessage，当UserMessage对其监听改变时进行判断
    //immediate创建时立即执行一次
    //huandler里面写了红点提示应该在什么条件下才会显示
    //因为当我们点击消息时红点提示会消失（这一步的判断在@click监听中完成），只有当我们UserMessage的长度newVal大于oldVal时才会有红点提示，
    watchMyMessage:{
      immediate:true,
      handler:function (newVal,oldVal)  {
        if (newVal>oldVal){
          this.isShowTip = true
        }
        else{
          this.isShowTip = false
        }
      }
    }
  }

标签：UserMessage,提示,实时,监听,消息,vuex,红点,页面
来源： https://blog.csdn.net/weixin_47596965/article/details/118438455