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