訂閱發布模式定義了一種一對多的依賴關系，讓多個訂閱者對象同時監聽某一個主題對象。這個主題對象在自身狀態變化時，會通知所有訂閱者對象，使它們能夠自動更新自己的狀態。

比如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呢？