這篇文章主要介紹了如何在vue怎么中使用發(fā)布訂閱模式，創(chuàng)新互聯(lián)小編覺(jué)得不錯(cuò)，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨創(chuàng)新互聯(lián)小編來(lái)看看吧！

撫順縣網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司于2013年開(kāi)始到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

vue是什么軟件

Vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

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
ok，那我們來(lái)嘗試來(lái)調(diào)用下
// 我們訂閱了兩個(gè)監(jiān)聽(tīng)者
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ā)布者")
可以看見(jiàn)控制臺(tái)返回了兩條消息，就是剛才我們定義的訂閱者里打印出的內(nèi)容
i can hear he say: 這里是發(fā)布者
 he say: 這里是發(fā)布者
這就是發(fā)布訂閱模式，我相信很多人概念都知道，但是至于在項(xiàng)目中如何實(shí)際運(yùn)用，這又是個(gè)大問(wèn)題。
畢竟設(shè)計(jì)模式感覺(jué)不是很常用，而且即使不用設(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è)方法是寫(xiě)在app.vue里面
// 獲取基本數(shù)據(jù)
 this.loadMenu()
 this.loadBasicData()
 this.loadUserInfo()
所以我要考慮到兩種情況
只有登陸后才能拉取這些數(shù)據(jù)
當(dāng)前頁(yè)面刷新，如果為登陸后則需要重新拉取數(shù)據(jù)，否則不進(jìn)行任何操作
1，常規(guī)解決方案
這個(gè)算是比較普遍的需求，類(lèi)似的很常見(jiàn)，按照常規(guī)解決方法，可以這么做：
在mixin 里面把這些方法放在里面
登陸成功后存一個(gè)狀態(tài)到sessionStorage里面，同時(shí)調(diào)用這些方法拉取數(shù)據(jù)
app.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è)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)聽(tīng)和發(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)聽(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 (to.name === "Login") {
  next()
  window.setSessionStorage && window.setSessionStorage('login', 'logout')
 } else {
 ....
以上就是創(chuàng)新互聯(lián)小編為大家收集整理的如何在vue怎么中使用發(fā)布訂閱模式，如何覺(jué)得創(chuàng)新互聯(lián)網(wǎng)站的內(nèi)容還不錯(cuò)，歡迎將創(chuàng)新互聯(lián)網(wǎng)站推薦給身邊好友。
            
            
                        

            分享文章：如何在vue怎么中使用發(fā)布訂閱模式            

            文章來(lái)源：http://weahome.cn/article/jheoic.html