【奇技婬巧】自定义一个简单的消息订阅&消息发布机制解决Hybrid APP通信问题

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

pubsub是什么

pubsub - 消息订阅发布机制，是前端框架组件进行通信的一种方式

为什么要自定义？

我们在使用vue框架开发的时候，肯定少不了组件间的各种通信。但是vue作为单页面应用的开发框架，当我们在做Hybrid APP开发的时候就会面临一个问题，app底部的tab按钮间要如何进行通信呢？

如图，首页、功能、我的这3个页面间的数据要如何通信呢？？一开始我也是按照vue间组件的通信方式来做的，事实上得确做不到组件间的通信，因为底部的tab按钮涉及到了原生开发，这边我也问过我们Android开发的同事，底部的3个tab，其实对应的是3个webview，我这边的理解是对应3个vue实例，这3个实例间是无法通信的（这点如果歧议可以指出）

解决方案

关于如何解决,当然也可以同过原生方法去处理，交给原生开发。这边我们老大给出了一个建议，简单方便，不需要原生去处理，也省去了重新发包重新上架商城这一步。
具体思路其实跟pubsub这个机制差不多，当我们在首页做完操作后发布一条消息（这里我们会存一条cookie作为发布的消息），在我的页面开启定时器去查询cookie当cookie值发生改变的时候，再去触发更新view的操作。具体看以下代码

需求：在上传作品页面上传作品后，点击我的页面自动显示上传的作品

   myPubsub.js文件
   // 自定义存值
    function publish(key,val) {
        Cookies.set(key,val)
    }
    // 自定义取值
    function subscribe(key) {
        return Cookies.get(key)
    }
    export default {
        publish,
        subscribe,
        // refresh
    }
   

   上传作品页
   //引入我们自定义的js文件
   import myRefresh from './myPubsub'
   //请求上传的作品列表
      getpiclist() {
        Api.NewActivity.prolist(this.$route.query.activityId)
          .then(res => {
            // console.log("请求上传列表成功", res)
            this.workList = res
            myRefresh.publish('refreshList', Date.now())//上传成功后我们模拟发布消息，将当前的时间戳存入cookie
          })
          .catch(err => {
            console.log("请求上传列表失败", err)
          })
      },

我的页面
//同样引入我们自定义的js文件
import myRefresh from './myPubsub'
//在data中初始化myCookie
data(){
    return{
        myCookie:null
    }
}
//在monted生命周期中启动循环定时器
      setInterval(() => {
        //在定时器内我们模拟订阅消息，每隔10s判断一次cookie，若cookie不一样则重新刷新列表数据，若一样则不予处理
        if (myRefresh.subscribe("refreshList") != this.myCookie) {
            this.getoneself();
            this.myCookie = myRefresh.subscribe("refreshList")
        } else {
          console.log('cookie一样,不处理', Cookies.get('refreshList'))
        }
      }, 10000)

至此，我们变实现了一个简单的消息订阅与发布的功能。