訂閱發布模式定義了一種一對多的依賴關系，讓多個訂閱者對象同時監聽某一個主題對象。這個主題對象在自身狀態變化時，會通知所有訂閱者對象，使它們能夠自動更新自己的狀態。
比如addEventListener 這個api就是個發布訂閱模式
如果用過vue的同學，可以把他類比于 watch
下面我們看一個例子
var observe={ fnsObj:{}, // 訂閱方法 on:function(key,fn){ if(!observe.fnsObj[key]){ observe.fnsObj[key] = [] } observe.fnsObj[key].push(fn) }, // 發布 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，那我們來嘗試來調用下
// 我們訂閱了兩個監聽者observe.on('say',function(e){console.log('i can hear he say: '+e)})observe.on('say',function(e){console.log('he say: '+e)})接著發布消息
// 發布消息observe.emmit("say","嘿，這里是發布者")可以看見控制臺返回了兩條消息，就是剛才我們定義的訂閱者里打印出的內容
i can hear he say: 這里是發布者
he say: 這里是發布者
這就是發布訂閱模式，我相信很多人概念都知道，但是至于在項目中如何實際運用，這又是個大問題。
畢竟設計模式感覺不是很常用，而且即使不用設計模式，也能實現需求，所以下面我著重介紹下，我在vue中碰到的一個需求中是如何使用發布訂閱模式。
實際運用
1，需求介紹
我這個項目是公司內部的人力資源管理系統。因此需要根據對不同權限進行菜單獲取，還有一些下拉框數據，以及一些基礎信息，需要在登陸后就馬上獲取，在調用接口后獲取數據后，把它存儲在vuex里面
目前這幾個方法是寫在app.vue里面
// 獲取基本數據 this.loadMenu() this.loadBasicData() this.loadUserInfo()
所以我要考慮到兩種情況
只有登陸后才能拉取這些數據
當前頁面刷新，如果為登陸后則需要重新拉取數據，否則不進行任何操作
1，常規解決方案
這個算是比較普遍的需求，類似的很常見，按照常規解決方法，可以這么做：
在mixin 里面把這些方法放在里面
登陸成功后存一個狀態到sessionStorage里面，同時調用這些方法拉取數據
app.vue里面的created生命周期里判斷sessionStorage里的狀態是否為登陸，如登陸則拉取數據
ok，需求解決，但是問題是，萬一這些方法是只能放在app.vue里面呢，比如這個項目，app.vue不是我寫的。是另外一個前端寫，他不愿意把這些方法放在mixin呢？
如果我們能夠監聽sessionStorage的變化就可以了。但是無論是watch 還是computed 都沒辦法監聽sessionStorage的變化，
所以這時候我們可以嘗試使用 發布訂閱模式
1,創建一個observe.js
class Observe { constructor() { this.fnsObj = {} } // 訂閱方法 on(key, fn) { if (!this.fnsObj[key]) { this.fnsObj[key] = [] } this.fnsObj[key].push(fn) } // 發布 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 observeSession2，在app.vue將他引入，同時定義監聽和發布者
import observeSession from './utils/Observe'...created(){ //刷新后如果為登陸狀態則獲取數據 sessionStorage.getItem('login') === 'login' && this.loadSelectVal() //定義全局方法，在調用window.setSessionStorage的時候，發布者發布信息 window.setSessionStorage = (key, value) => { observeSession.emmit('watchSesStore', { key, value }) } // 監聽存儲在sessionStorage登陸狀態變化，如果為登陸狀態則獲取數據，監聽者監聽信息 observeSession.on('watchSesStore', e => { sessionStorage.setItem(e.key, e.value) e.value === 'login'&&this.loadSelectVal() })}最后我們在登陸login.vue頁面登陸成功的時候，給他加一行
window.setSessionStorage('login', 'login')
以及在router.js路由控制里面，對退出的時候處理
//如果跳轉到登陸頁面則登陸狀態為登出 if (to.name === "Login") { next() window.setSessionStorage && window.setSessionStorage('login', 'logout') } else { ....至此需求完美解決。
總結
以上所述是小編給大家介紹的發布訂閱模式在vue中的實際運用實例詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
