vue 新消息提示

场景分析：
场景1：一我的（信息列表一条）发了多条消息（消息列表多条）；
场景2：多我的（信息列表多条）发送了多条消息（消息列表多条）。

思路：
1.把请求的消息列表push进一个数组中，提交到vuex；
2.消息组件外部引用这个数组与最新的请求列表作数据对比（消息id）；
3.把id不一样的列表再push进一个新数组；
4.这个数组的长度就是新消息的条数，若是两个数组的id/长度都相同的话，没有数据push长度为0，则表示没有新消息。

//组件内部消息请求
getNewsList() { 
  classificationList() 
   .then(res => { 
      this.newsList = res.Rows; 
      //1.新数组 
      let newArr = []; 
      for(let i in res.Rows){
       //2.把请求得来的数据push进新数组 
       newArr.push({MsgId:res.Rows[i].MsgId});
     }
    //3.提交到vuex中保存 
    this.$store.commit('setNewsData',{newArr:newArr});
 })
  .catch(err => { 
       console.log("error", err); 
   });
 }

//组件外部消息请求
//html
<div class="fl">
    个人消息<span v-show="newLen" class="news">{{newLen}}</span>
</div>

<script>
import { mapState } from "vuex";
import {classificationList} from '@/http/index'

export default{
    data(){
        return {
            newLen:0
        }
    },
    
    computed:{
      ...mapState({
         newsLength: state => state.setNewsData
      })
    },
    
    created(){
      this.getNewsList();
    },

    methods:{
        getNewsList() {
          classificationList()
            .then(res => {
              //1.新建用来存放新消息的数组
              let newarr = [];
              //2.最新请求的数据，与上一轮的传到vuex的数据作对比
              for(let i in res.Rows){
                  //3.把不一致的数据push进新数组
                  if(res.Rows[i].MsgId !== this.newsLength.newArr[i].MsgId){
                     newarr.push({id:res.Rows[i].MsgId});
                  }
              }
              //4.这数据的长度就表明新消息的条数，放到data中供渲染。      
              this.newLen = newarr.length;
            })
            .catch(err => {
              console.log("error", err);
            });
        }
    }
}
</script>

1.消息外部

2.消息组件内部

3.有新消息提醒

author：XiNine