pubsub.js无法订阅到消息

Question

当我点击按钮时触发publish并且跳转页面，在新的页面的created方法里调用subscribe订阅不到数据，但是我再退回点击按钮的那个页面，再次点击后跳转又订阅到数据了

Answer 1

引自免费微信小程序：皆我百晓生

在您提供的场景中，您正在尝试使用pubsub.js库实现在Vue应用中的跨组件消息传递。当从一个页面（图1）发布消息并跳转到另一个页面（图2），在新页面的created生命周期钩子中订阅消息，但首次订阅时没有接收到数据。

针对这个问题，可能的原因是由于页面加载和消息发布的异步性导致的。在图1的页面点击按钮时，虽然执行了PubSub.publish("data", this.edit)，但由于页面立即跳转，新页面（图2）可能尚未完成初始化，因此在created钩子中订阅时可能会错过这次发布。

为了解决这个问题，可以尝试在图2页面的beforeRouteEnter Vue Router导航守卫中进行订阅，确保在页面渲染前就已经订阅消息。

修改图2页面的Vue组件代码如下：

export default {
  data() {
    return {
      post: {},
      pubid: null,
    };
  },
  beforeRouteEnter(to, from, next) {
    PubSub.subscribe("data", (name, value) => {
      this.post = {
        postsId: value.postsId,
        postsTitle: value.postsTitle,
        postsCover: `postsCoverImg${value.postsCover}`,
        postsDescription: value.postsDescription,
        postsDate: value.postsDate.split(" - "),
        postsmd: value.postsmd,
        bloggerId: value.bloggerId,
      };

      // 如果需要的话，可以在这里触发更新视图
      this.$nextTick(() => {
        // 触发任何必要的计算属性或监听器
      });
    });

    // 保存订阅ID
    this.pubid = PubSub.getSubscriptionId();

    // 确保next函数被调用，以便继续导航
    next();
  },
  beforeDestroy() {
    if (this.pubid !== null) {
      PubSub.unsubscribe(this.pubid);
    }
  },
};

这段代码会在路由切换之前订阅消息，从而保证即使在页面跳转过程中也能接收到发布的信息。同时，在beforeDestroy生命周期钩子中取消订阅以避免内存泄漏。需要注意的是，这里假设PubSub.getSubscriptionId()能获取到当前订阅的ID，具体实现可能根据pubsub.js库有所不同。