宜宾网站建设公司

如何在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
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怎么中使用发布订阅模式，如何觉得创新互联成都网站设计公司网站的内容还不错，欢迎将创新互联成都网站设计公司网站推荐给身边好友。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
                

                网站名称：如何在vue怎么中使用发布订阅模式-创新互联                

                链接地址：http://ybzwz.com/article/coighi.html

其他资讯