發(fā)布訂閱模式在vue中的實(shí)際運(yùn)用實(shí)例詳解

1、發(fā)布訂閱模式在v中的實(shí)際運(yùn)用實(shí)例詳解訂閱發(fā)布模式定義了一種一對(duì)多的依賴關(guān)系，讓多個(gè)訂閱者對(duì)象同時(shí)監(jiān)聽(tīng)某一個(gè)主題對(duì)象。這個(gè)主題對(duì)象在自身狀態(tài)變化時(shí),會(huì)通知所有訂閱者對(duì)象，使它們能夠自動(dòng)更新自己的狀態(tài)。比如ve這個(gè)蹴是個(gè)發(fā)布訂閱模式如果用過(guò)vue的同學(xué)，可以把他類比于刪除訂閱者eveuv下面我們看一個(gè)例子veve訂/閱/方法on:function(keyobserve.fnsObjkey)serve.fnsOeerve.fnsObjkey.push(發(fā)布emmit:function(key,value)bserve.fnsObjkey.lenvevebjkevleng,value)n(key)ev

2、eeeeeeve那我們來(lái)嘗試來(lái)調(diào)用下erve.on(fuole.logerve.on(fuole.loge我/們訂閱了兩個(gè)監(jiān)聽(tīng)者tion(e)eeetion(e)+e)接著發(fā)布消息/發(fā)/布消息evee嘿，這里是發(fā)布者可以看見(jiàn)控制臺(tái)返回了兩條消息，就是剛才我們定義的訂閱者里打印出的內(nèi)容e這里是發(fā)布者e這里是發(fā)布者這就是發(fā)布訂閱模式，我相信很多人概念都知道，但是至于在項(xiàng)目中如何實(shí)際運(yùn)用，這又是個(gè)大問(wèn)題。畢竟設(shè)計(jì)模式感覺(jué)不是很常用，而且即使不用設(shè)計(jì)模式，也能實(shí)現(xiàn)需求，所以下面我著重介紹下，我柯ue中碰到的一個(gè)需求中是如何使用發(fā)布訂閱模式。實(shí)際運(yùn)用1，需求介紹我這個(gè)項(xiàng)目是公司內(nèi)部的人力資源管理系統(tǒng)。因

3、此需要根據(jù)對(duì)不同權(quán)限進(jìn)行菜單獲取，還有一些下拉框數(shù)據(jù)，以及一些基礎(chǔ)信息，需要在登陸后就馬上獲取，在調(diào)用接口后獲取數(shù)據(jù)后，把它存儲(chǔ)在vue里面目前這幾個(gè)方法是寫(xiě)在里ue/獲取基本數(shù)據(jù)this.loadMenu()this.loadBasicData()this.loadUserInfo()所以我要考慮到兩種情況只有登陸后才能拉取這些數(shù)據(jù)當(dāng)前頁(yè)面刷新，如果為登陸后則需要重新拉取數(shù)據(jù)，否則不進(jìn)行任何操作1常規(guī)解決方案這個(gè)算是比較普遍的需求，類似的很常見(jiàn)，按照常規(guī)解決方法，可以這么做：在mixin里面把這些方法放在里面登陸成功后存一個(gè)狀態(tài)至到sessionstorage里面，同時(shí)調(diào)用這些方法拉取數(shù)據(jù)a

4、pp.vue里面的created生命周期里判斷sessionstorage里的狀態(tài)是否為登陸，如登陸則拉取數(shù)據(jù)ok,需求解決，但是問(wèn)題是，萬(wàn)一這些方法是只能放在app.vue里面呢，比如這個(gè)項(xiàng)目，app.vue不是我寫(xiě)的。是另外一個(gè)前端寫(xiě)，他不愿意把這些方法放在mixin呢？如果我們能夠監(jiān)聽(tīng)sessionstorage的變化就可以了。但是無(wú)論是watch還是computed都沒(méi)辦法監(jiān)聽(tīng)sessionstorage的變化，所以這時(shí)候我們可以嘗試使用發(fā)布訂閱模式1,創(chuàng)建一個(gè)observersclassObserveconstructor()this.fnsObj=/訂閱方法on(key,fn)if

5、(!this.fnsObjkey)this.fnsObjkey=this.fnsObjkey.push(fn)/發(fā)布emmit(key,value)if(this.fnsObjkey.length)varfns=this.fnsObjkeyfor(leti=0;iobservesession.emmit(watchsesstore,key,value)/監(jiān)聽(tīng)存儲(chǔ)在sessionstorage登陸狀態(tài)變化，如果為登陸狀態(tài)則獲取數(shù)據(jù)，監(jiān)聽(tīng)者監(jiān)聽(tīng)信息observesession.on(watchsesstore,e=sessionstorage.setItem(e.key,e.value)e.value=login&this.loadselectVal()最后我們?cè)诘顷憀ogin.vue頁(yè)面登陸成功的時(shí)候，給他加一行window.setSessionStorage(login,login)以及在router.js路由控制里面，對(duì)退出的時(shí)候處理/如果跳轉(zhuǎn)到登陸頁(yè)面則登陸狀態(tài)為登出if(=Login)next()window.setSessionStorage&window.setSessionStorage(login,log