如何在vue怎么中使用發布訂閱模式

這篇文章主要介紹了如何在vue怎么中使用發布訂閱模式，億速云小編覺得不錯，現在分享給大家，也給大家做個參考，一起跟隨億速云小編來看看吧！

vue是什么軟件

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

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 observeSession

2，在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怎么中使用發布訂閱模式，如何覺得億速云網站的內容還不錯，歡迎將億速云網站推薦給身邊好友。