近來，在做公司的聊天系統，引用的是極光的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 我發給別人穿0msgType : 1,//消息類型 圖片傳1 文字傳0}}else{obj = {url,imgAlt:"獲取圖片失敗",imgWidth,msgSendType:1,//別人發給我傳1 我發給別人穿0msgType : 1,//消息類型 圖片傳1 文字傳0}}}).catch(error=>{obj = {url,imgAlt:"獲取圖片失敗",imgWidth,msgSendType:1,//別人發給我傳1 我發給別人穿0msgType : 1,//消息類型 圖片傳1 文字傳0}})}else if(msgBox.messages[0].content.msg_type=='text'){obj = {text:msgBox.messages[0].content.msg_body.text,msgSendType:1,//別人發給我傳1 我發給別人穿0msgType : 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

? ?

?

轉載于:https://www.cnblogs.com/jinzhenzong/p/9323044.html

總結

以上是生活随笔為你收集整理的Vue跨路由触发事件，Vue监听sessionStorage的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。