發(fā)布訂閱模式在vue中的實(shí)際運(yùn)用實(shí)例詳解
訂閱發(fā)布模式定義了一種一對(duì)多的依賴關(guān)系,讓多個(gè)訂閱者對(duì)象同時(shí)監(jiān)聽某一個(gè)主題對(duì)象。這個(gè)主題對(duì)象在自身狀態(tài)變化時(shí),會(huì)通知所有訂閱者對(duì)象,使它們能夠自動(dòng)更新自己的狀態(tài)。
比如addEventListener 這個(gè)api就是個(gè)發(fā)布訂閱模式
如果用過vue的同學(xué),可以把他類比于 watch
下面我們看一個(gè)例子
var observe={ fnsObj:{}, // 訂閱方法 on:function(key,fn){ if(!observe.fnsObj[key]){ observe.fnsObj[key] = [] } observe.fnsObj[key].push(fn) }, // 發(fā)布 emmit:function(key,value){ if(observe.fnsObj[key].length){ var fnsList = observe.fnsObj[key] for(var i=0;i<fnsList.length;i++){ fnsList[i].call(this,value) } } }, //刪除訂閱者 remove:function(key){ for(var k in observe.fnsObj){ if(k===key) delete observe.fnsObj[key] } } }
ok,那我們來嘗試來調(diào)用下
// 我們訂閱了兩個(gè)監(jiān)聽者 observe.on('say',function(e){ console.log('i can hear he say: '+e) }) observe.on('say',function(e){ console.log('he say: '+e) })
接著發(fā)布消息
// 發(fā)布消息 observe.emmit("say","嘿,這里是發(fā)布者")
可以看見控制臺(tái)返回了兩條消息,就是剛才我們定義的訂閱者里打印出的內(nèi)容
i can hear he say: 這里是發(fā)布者
he say: 這里是發(fā)布者
這就是發(fā)布訂閱模式,我相信很多人概念都知道,但是至于在項(xiàng)目中如何實(shí)際運(yùn)用,這又是個(gè)大問題。
畢竟設(shè)計(jì)模式感覺不是很常用,而且即使不用設(shè)計(jì)模式,也能實(shí)現(xiàn)需求,所以下面我著重介紹下,我在vue中碰到的一個(gè)需求中是如何使用發(fā)布訂閱模式。
實(shí)際運(yùn)用
1,需求介紹
我這個(gè)項(xiàng)目是公司內(nèi)部的人力資源管理系統(tǒng)。因此需要根據(jù)對(duì)不同權(quán)限進(jìn)行菜單獲取,還有一些下拉框數(shù)據(jù),以及一些基礎(chǔ)信息,需要在登陸后就馬上獲取,在調(diào)用接口后獲取數(shù)據(jù)后,把它存儲(chǔ)在vuex里面
目前這幾個(gè)方法是寫在app.vue里面
// 獲取基本數(shù)據(jù) this.loadMenu() this.loadBasicData() this.loadUserInfo()
所以我要考慮到兩種情況
只有登陸后才能拉取這些數(shù)據(jù)
當(dāng)前頁面刷新,如果為登陸后則需要重新拉取數(shù)據(jù),否則不進(jìn)行任何操作
1,常規(guī)解決方案
這個(gè)算是比較普遍的需求,類似的很常見,按照常規(guī)解決方法,可以這么做:
在mixin 里面把這些方法放在里面
登陸成功后存一個(gè)狀態(tài)到sessionStorage里面,同時(shí)調(diào)用這些方法拉取數(shù)據(jù)
app.vue里面的created生命周期里判斷sessionStorage里的狀態(tài)是否為登陸,如登陸則拉取數(shù)據(jù)
ok,需求解決,但是問題是,萬一這些方法是只能放在app.vue里面呢,比如這個(gè)項(xiàng)目,app.vue不是我寫的。是另外一個(gè)前端寫,他不愿意把這些方法放在mixin呢?
如果我們能夠監(jiān)聽sessionStorage的變化就可以了。但是無論是watch 還是computed 都沒辦法監(jiān)聽sessionStorage的變化,
所以這時(shí)候我們可以嘗試使用 發(fā)布訂閱模式
1,創(chuàng)建一個(gè)observe.js
class Observe { constructor() { this.fnsObj = {} } // 訂閱方法 on(key, fn) { if (!this.fnsObj[key]) { this.fnsObj[key] = [] } this.fnsObj[key].push(fn) } // 發(fā)布 emmit(key, value) { if (this.fnsObj[key].length) { var fns = this.fnsObj[key] for (let i = 0; i < fns.length; i++) { fns[i].call(this, value) } } } //刪除訂閱者 remove(key) { for (var k in this.fnsObj) { if (k === key) { delete (this.fnsObj[k]) } } } } const observeSession = new Observe() export default observeSession
2,在app.vue將他引入,同時(shí)定義監(jiān)聽和發(fā)布者
import observeSession from './utils/Observe' ... created(){ //刷新后如果為登陸狀態(tài)則獲取數(shù)據(jù) sessionStorage.getItem('login') === 'login' && this.loadSelectVal() //定義全局方法,在調(diào)用window.setSessionStorage的時(shí)候,發(fā)布者發(fā)布信息 window.setSessionStorage = (key, value) => { observeSession.emmit('watchSesStore', { key, value }) } // 監(jiān)聽存儲(chǔ)在sessionStorage登陸狀態(tài)變化,如果為登陸狀態(tài)則獲取數(shù)據(jù),監(jiān)聽者監(jiān)聽信息 observeSession.on('watchSesStore', e => { sessionStorage.setItem(e.key, e.value) e.value === 'login'&&this.loadSelectVal() }) }
最后我們?cè)诘顷憀ogin.vue頁面登陸成功的時(shí)候,給他加一行
window.setSessionStorage('login', 'login')
以及在router.js路由控制里面,對(duì)退出的時(shí)候處理
//如果跳轉(zhuǎn)到登陸頁面則登陸狀態(tài)為登出 if (to.name === "Login") { next() window.setSessionStorage && window.setSessionStorage('login', 'logout') } else { ....
至此需求完美解決。
總結(jié)
以上所述是小編給大家介紹的發(fā)布訂閱模式在vue中的實(shí)際運(yùn)用實(shí)例詳解,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
mockjs+vue頁面直接展示數(shù)據(jù)的方法
這篇文章主要介紹了mockjs+vue頁面直接展示數(shù)據(jù)的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12Vue電商網(wǎng)站首頁內(nèi)容吸頂功能實(shí)現(xiàn)過程
電商網(wǎng)站的首頁內(nèi)容會(huì)比較多,頁面比較長,為了能讓用戶在滾動(dòng)瀏覽內(nèi)容的過程中都能夠快速的切換到其它分類。需要分類導(dǎo)航一直可見,所以需要一個(gè)吸頂導(dǎo)航的效果。目標(biāo):完成頭部組件吸頂效果的實(shí)現(xiàn)2023-04-04Vue.JS實(shí)現(xiàn)垂直方向展開、收縮不定高度模塊的JS組件
這篇文章主要介紹了Vue.JS實(shí)現(xiàn)垂直方向展開、收縮不定高度模塊的JS組件,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06對(duì)Vue2 自定義全局指令Vue.directive和指令的生命周期介紹
今天小編就為大家分享一篇對(duì)Vue2 自定義全局指令Vue.directive和指令的生命周期介紹,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08tomcat部署前端vue項(xiàng)目步驟(項(xiàng)目上線具體操作)
在實(shí)際開發(fā)中,我們經(jīng)常會(huì)遇到將Vue項(xiàng)目部署到Tomcat服務(wù)器上的需求,下面這篇文章主要給大家介紹了關(guān)于tomcat部署前端vue項(xiàng)目(項(xiàng)目上線具體操作)的相關(guān)資料,需要的朋友可以參考下2024-07-07vue3循環(huán)設(shè)置ref并獲取的解決方案
我們?cè)谄綍r(shí)做業(yè)務(wù)的時(shí)候,父子組件通信會(huì)經(jīng)常用到ref,這篇文章主要給大家介紹了關(guān)于vue3循環(huán)設(shè)置ref并獲取的解決方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02