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=0; i<res.Rows.length; i++){
       //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(var i=0; i<res.Rows.length; i++){
                for(var j=0; j<this.newsLength.newArr.length; j++){
                    //3.把不一致的数据push进新数组
                  if(this.newsLength.newArr[i].MsgId != res.Rows[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.有新消息提醒

PS:新手第一次尝试写博客,有什么地方不好的还望诸位不吝赐教 author:Github ----- XiNine

原文链接:segmentfault.com

上一篇:vue的provide / inject 有什么用?
下一篇:在react项目中引入iconfont图标

相关推荐

官方社区

扫码加入 JavaScript 社区