发布订阅模式在vue中的实际运用实例详解

订阅发布模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时，会通知所有订阅者对象，使它们能够自动更新自己的状态。

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