vue new message prompt

Scenario analysis:
Scenario 1: one person (one information list) sends multiple messages (multiple message lists);
Scenario 2: multiple people (multiple information lists) send multiple messages (multiple message lists).

Train of thought:
1. push the requested message list into an array and submit it to vuex.
2. The message component externally references this array to make data comparison with the latest request list (message id)
3. push the list with different id into a new array.
4. The length of this array is the number of new messages. If the id / length of the two arrays are the same, if there is no data and the push length is 0, then there is no new message.

//Component internal message request
getNewsList() { 
  classificationList() 
   .then(res => { 
      this.newsList = res.Rows; 
      // 1 new arrays 
      let newArr = []; 
      for(let i=0; i<res.Rows.length; i++){
       //2. push the requested data into a new array 
       newArr.push({MsgId:res.Rows[i].MsgId});
     }
    //3. Submit to vuex to save 
    this.$store.commit('setNewsData',{newArr:newArr});
 })
  .catch(err => { 
       console.log("error", err); 
   });
 }
//Component external message request
//html
<div class="fl">
    //My message < span v-show = "newlen" class = "news" > {{newlen}}}</span>
</div>

<script>
import { mapState } from "vuex";

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

    methods:{
        getNewsList() {
          classificationList()
            .then(res => {
                //1. Create a new array to hold new messages
              let newarr = [];
              //2. The latest requested data is compared with the data transmitted to vuex in the previous round
              for(var i=0; i<res.Rows.length; i++){
                for(var j=0; j<this.newsLength.newArr.length; j++){
                    //3. push inconsistent data into new array
                  if(this.newsLength.newArr[i].MsgId != res.Rows[i].MsgId){
                     newarr.push({id:res.Rows[i].MsgId});
                  }
                }
              }
              //4. The length of this data represents the number of new messages, which are put into data for rendering.
              this.newLen = newarr.length;
            })
            .catch(err => {
              console.log("error", err);
            });
        }
    }
}
</script>

1. Message external

2. Inside the message component

3. New news alert

PS: the first time a novice tries to write a blog, I hope you can give me some advice on what's wrong
author: Github ----- XiNine

Tags: Javascript github

Posted on Fri, 08 Nov 2019 16:52:39 -0500 by Domestics