Uniapp（Vue2）数据通信问题解决方案

最近在开发一个论坛的小程序，还附带了社交功能，需要有关注用户的功能还有聊天功能。遇到了一个想了一天的问题：Uniapp（Vue2）数据通信问题解决方案。

先说下需求吧：

我们小程序首页有文章列表，文章是由用户发送的，用户右边有一个关注的状态。

这个文章列表不止在首页出现，在其他页面都有。现在要实现在别的页面关注了这个用户之后回到首页能够自动修改关注状态。

开发环境：

    Uniapp Vue2.x
    HBuilderX  3.4.18.20220630

之前的解决方法

一、在首页用生命周期钩子onShow重新加载第一页数据。

优点：解决方法简单，可以刷新所有可能出现的状态。
缺点：用户体验不好，我翻到了第100页，回到首页你让我重新翻？？？

二、用Vuex存储用户的关注状态，有请求的时候去更新Vuex数据。

优点：可以无痛解决问题，所有地方的用户状态都对应同一个状态、数据源一致。
缺点：性能不行，如果有展示上百万条数据，那小程序就卡住了。

三、利用Uniapp的getRouter()获取上一页的原型，去动态修改状态。

优点：不用请求接口直接动态更新。
缺点：很明显，只能首页的下级页面可以实现，其他页面（tabbar）无法同步这个状态。

四、手机浏览到哪里通过更新哪条数据加上防抖。

优点：没啥大毛病。
缺点：请求频率高，代码量大。

好了看到这里，你们可以想一下有什么解决方案。

思考过程

首页有个文章列表，其他页面也有文章列表，我是不是能用页面通信？？想到这里我直接去查资料页面直接如何通信，搓搓手直接开干。

window.postMessage();

找到了试例文档，大改就是用postMessage去发送信息，另一个页面接收信息，实现一个像IM通信的应用。

写到这我发现有点不对劲了。Vue不是单页面应用吗？？？哪来的页面通信？？

戴上耳机开始emo...

下午有个前端开发工程师来面试，我翻了翻我的面试备忘录，问了一个问题组件之间数据如何通信，突然就想到了解决方案！

最后解决方案

利用Vue2的事件总线$Bus。

// 直接在main.js配置bus
Vue.prototype.$bus = new Vue();

// 页面发送信息
this.$bus.$emit("memberFollowChange", {
    id: this.item.authorId,
    isFollow: this.item.isFollow
})

// 文章列表组件去接收信息
this.$bus.$on("memberFollowChange", (val) => {
// 更新状态业务逻辑
})

优点：完全不用调用接口去更新数据，一个地方修改所有用到状态的地方同步修改。
缺点：每个涉及到用户关注状态的地方都要写几行代码。

总结

这个EventBus我在准备面试的时候也背过这个问题。但是在开发的时候完全没有想过。所以说面试中的很多问题，大部分都是背下来就好了，很少实战使用过，导致很多问题想不到最优的解决方案，这个问题后面面试的时候问了一下面试者，他想了很久也没有想出来比事件总线好的方案。

所以说不管简历上写的多少年工作经验，都要有实战参与过一个从0开始的项目开发，从一开始就考虑好性能，封装，细节方面的问题。在这些基础上去优化用户体验。有些冷门的知识，有时候也会奇迹般地出现在你的项目中。

项目小程序（已上线）：瑞合圈子