Vue跨路由觸發事件，Vue監聽sessionStorage

　　近來，在作公司的聊天系統，引用的是極光的api。項目需求實時監聽別人發過來的消息，進行渲染到頁面，還有歷史記錄也要渲染，歷史記錄和實時聊天記錄返回的結構體還不同，看到需求的我欲哭無淚，首先登陸是在首頁的，聊天的是子路由裏面，我XXXX。監聽過來我怎麼給到子頁面（注：沒有引入vuex）？看樣子只能存sessionStorage，可是vue也不能夠監聽sessionStorage阿（不知道爲何的，請去啃vue監聽的代碼）。那麼重點來了 怎麼實現？

　　第一步

　　　　　

Vue.prototype.JIM  = JIMOBJECT
// 監聽人的消息
Vue.prototype.JIMListenMsg = "";
// 須要監聽的人的name
Vue.prototype.JIMListenTargetname = ""; 

　　寫入了原型幾個變量，解釋一下：JIMOBJECT 是我封裝的極光的類，以下圖（部分代碼，省略了中間，須要極光的朋友能夠私聊我要）：

JIMListenMsg  是監聽到的消息（最重要的變量，若是不是作極光的朋友，這一個就能夠了）

JIMListenTargetname 記錄用戶點擊的是在和誰聊天（極光實時聊天返回的是全部給你發消息的人 因此須要過濾掉）


第二步
初始化、登陸極光以後 聊天，對於不是作極光的就是在大家監聽數據改變的地方。

this.JIM.JIM.onMsgReceive((data)=>{
              // 極光的實時監聽
      
              this.receive(data);
            })


//receive內容



      receive(msgBox){
          console.log(msgBox);
            if(msgBox.messages[0].content.msg_type=='image'){
                 // 解析圖片
           var obj = {};
          let url = "";
          let imgAlt = "";
          let imgWidth = 0;
                 this.JIM.getResource(msgBox.messages[0].content.msg_body.media_id).then(data=>{
                     if(data.message == "success"){
                         url = data.url;
                         imgAlt = '獲取圖片成功';
                         // 過大的圖片
                         
                         if(msgBox.messages[0].content.msg_body.width>document.body.clientWidth-6/16*document.body.clientWidth){

                             imgWidth = document.body.clientWidth-6/16*document.body.clientWidth
               }
                    obj = {
                                    url,
                                    imgAlt,
                                    imgWidth,
                                    msgSendType:1,//別人發給我傳1 我發給別人穿0
                                    msgType : 1,//消息類型 圖片傳1 文字傳0
                                }
                     }else{
                       
              
                    obj = {
                                    url,
                                    imgAlt:"獲取圖片失敗",
                                    imgWidth,
                                    msgSendType:1,//別人發給我傳1 我發給別人穿0
                                    msgType : 1,//消息類型 圖片傳1 文字傳0
                                }
          
               
          
                     }
                 }).catch(error=>{
                     
                    obj = {
                                    url,
                                    imgAlt:"獲取圖片失敗",
                                    imgWidth,
                                    msgSendType:1,//別人發給我傳1 我發給別人穿0
                                    msgType : 1,//消息類型 圖片傳1 文字傳0
                                }
          
          
            
                     
                 })
             }else if(msgBox.messages[0].content.msg_type=='text'){
              
                    obj = {
                                    text:msgBox.messages[0].content.msg_body.text,
                                    msgSendType:1,//別人發給我傳1 我發給別人穿0
                                    msgType : 0,//消息類型 圖片傳1 文字傳0
                    }
         }
             let sessionData = JSON.parse(sessionStorage.getItem("JIMMsgArr"))
                    
                    if (sessionData[this.targetName]!=undefined){
                        
                        let sessionedData = sessionData[this.targetName].push(obj);
                        window.sessionStorage.setItem("JIMMsgArr",JSON.stringify(sessionData));
                    
                    }else{
                    
                        sessionData[this.targetName] = [];
                            sessionData[this.targetName].push(obj);
                
                        window.sessionStorage.setItem("JIMMsgArr",JSON.stringify(sessionData));
                    
                    }
          window.sessionStorage.setItem("JIMMsgArr",JSON.stringify(sessionData));
    
          if(msgBox.messages[0].from_username == this.$root.JIMListenTargetname){
                this.$root.JIMListenFunction(obj)
          }
      },

 

如上：我把聊天記錄存儲到sessionStorage，而且以用戶key做爲主鍵（根據本身須要），關鍵點是最後

 this.$root.JIMListenFunction(obj)

這句，觸發一個全局方法，那麼全局方法是什麼呢？

this.$root.JIMListenFunction = (data)=> {
        
                this.$set(this.msgArr,this.msgArr.length,data);
            }

就是這個，寫在你須要監聽數據的地方，我賦值給msgArr 而後watch msgArr 調整頁面滾動條，頁面渲染呢？是否是想問？固然直接頁面用msgArr就能夠實現了。這個時候是否是有點懵逼，這些東西和sessionStorage有什麼關係？

sessionStorage記錄的是你全部的聊天以及聊天的列表，你不記錄的話  歷史記錄怎麼辦？極光的歷史記錄只能記錄你登陸以前的記錄，實時聊天切換用戶時候 聊天記錄不存的。

還有比較關鍵的就是在distoryed時候要把方法清空，防止切換出去還在工做

對於不是極光的朋友，你須要監聽sessionStorage也能夠用此方法，使用方法：將sessionStorage在更新的時候獲取一邊，而後把全局方法參數改成sessionStorage就能夠了。

好了今天就分享這麼多，幫助到你了麼？請點個關注把。不懂的請加我qq：421217189　　15274527