近來(lái)，在做公司的聊天系統(tǒng)，引用的是極光的api。項(xiàng)目需求實(shí)時(shí)監(jiān)聽(tīng)別人發(fā)過(guò)來(lái)的消息，進(jìn)行渲染到頁(yè)面，還有歷史記錄也要渲染，歷史記錄和實(shí)時(shí)聊天記錄返回的結(jié)構(gòu)體還不一樣，看到需求的我欲哭無(wú)淚，首先登錄是在首頁(yè)的，聊天的是子路由里面，我XXXX。監(jiān)聽(tīng)過(guò)來(lái)我怎么給到子頁(yè)面（注：沒(méi)有引入vuex）？看樣子只能存sessionStorage，但是vue也不可以監(jiān)聽(tīng)sessionStorage阿（不知道為什么的，請(qǐng)去啃vue監(jiān)聽(tīng)的代碼）。那么重點(diǎn)來(lái)了 怎么實(shí)現(xiàn)？

　　第一步

　　　　　

Vue.prototype.JIM = JIMOBJECT // 監(jiān)聽(tīng)人的消息 Vue.prototype.JIMListenMsg = ""; // 需要監(jiān)聽(tīng)的人的name Vue.prototype.JIMListenTargetname = "";

　　寫入了原型幾個(gè)變量，解釋一下：JIMOBJECT?是我封裝的極光的類，如下圖（部分代碼，省略了中間，需要極光的朋友可以私聊我要）：

JIMListenMsg 是監(jiān)聽(tīng)到的消息（最重要的變量，如果不是做極光的朋友，這一個(gè)就可以了）
JIMListenTargetname 記錄用戶點(diǎn)擊的是在和誰(shuí)聊天（極光實(shí)時(shí)聊天返回的是所有給你發(fā)消息的人 所以需要過(guò)濾掉）


^第二步
初始化、登錄極光之后 聊天，對(duì)于不是做極光的就是在你們監(jiān)聽(tīng)數(shù)據(jù)改變的地方。
this.JIM.JIM.onMsgReceive((data)=>{// 極光的實(shí)時(shí)監(jiān)聽(tīng)this.receive(data);})//receive內(nèi)容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 = '獲取圖片成功';// 過(guò)大的圖片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,//別人發(fā)給我傳1 我發(fā)給別人穿0msgType : 1,//消息類型 圖片傳1 文字傳0}}else{obj = {url,imgAlt:"獲取圖片失敗",imgWidth,msgSendType:1,//別人發(fā)給我傳1 我發(fā)給別人穿0msgType : 1,//消息類型 圖片傳1 文字傳0}}}).catch(error=>{obj = {url,imgAlt:"獲取圖片失敗",imgWidth,msgSendType:1,//別人發(fā)給我傳1 我發(fā)給別人穿0msgType : 1,//消息類型 圖片傳1 文字傳0}})}else if(msgBox.messages[0].content.msg_type=='text'){obj = {text:msgBox.messages[0].content.msg_body.text,msgSendType:1,//別人發(fā)給我傳1 我發(fā)給別人穿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)}},

?

如上：我把聊天記錄存儲(chǔ)到sessionStorage，并且以用戶key作為主鍵（根據(jù)自己需要），關(guān)鍵點(diǎn)是最后
this.$root.JIMListenFunction(obj)

這句，觸發(fā)一個(gè)全局方法，那么全局方法是什么呢？

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

就是這個(gè)，寫在你需要監(jiān)聽(tīng)數(shù)據(jù)的地方，我賦值給msgArr 然后watch msgArr 調(diào)整頁(yè)面滾動(dòng)條，頁(yè)面渲染呢？是不是想問(wèn)？當(dāng)然直接頁(yè)面用msgArr就可以實(shí)現(xiàn)了。這個(gè)時(shí)候是不是有點(diǎn)懵逼，這些東西和sessionStorage有什么關(guān)系？

sessionStorage記錄的是你所有的聊天以及聊天的列表，你不記錄的話? 歷史記錄怎么辦？極光的歷史記錄只能記錄你登錄之前的記錄，實(shí)時(shí)聊天切換用戶時(shí)候 聊天記錄不存的。

還有比較關(guān)鍵的就是在distoryed時(shí)候要把方法清空，防止切換出去還在工作

對(duì)于不是極光的朋友，你需要監(jiān)聽(tīng)sessionStorage也可以用此方法，使用方法：將sessionStorage在更新的時(shí)候獲取一邊，然后把全局方法參數(shù)改為sessionStorage就可以了。

好了今天就分享這么多，幫助到你了么？請(qǐng)點(diǎn)個(gè)關(guān)注把。不懂的請(qǐng)加我qq：421217189　　15274527

? ?

?

轉(zhuǎn)載于:https://www.cnblogs.com/jinzhenzong/p/9323044.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。