vue框架中的消息订阅与发布pubsub

在Vue框架中，除了使用Vuex进行状态管理外，还可以使用其他方式进行消息订阅与发布，其中一种常用的方式是使用PubSub（发布-订阅）模式。

PubSub模式是一种消息传递模式，它将消息发布者和订阅者解耦，允许他们之间在不建立直接联系的情况下进行通信。在Vue应用中，可以使用Vue实例的事件系统来实现PubSub模式。

Vue的消息的订阅与发布模式,这是一种组件间的通信方式，适用于：任意组件间通信。

安装 pubub

npm i pubsub-js

引入 pubub

import pubsub from 'pubsub-js'

提供数据

pubsub.publish('xxx',数据)

接收数据

A 组件需要接收数据，则在 A 组件中订阅消息，订阅的回调留在 A 组件自身

methods: {
    demo(msgName, data){...}
},
mounted() {
    this.pid = pubsub.subscribe('xxx',this.demo)
}

接收数据还有一种写法

mounted() {
    this.pid = pubsub.subscribe('xxx',(msgName, data)=>{...})
}

注意：最好在 beforeDestroy 钩子中，去取消订阅

beforeDestroy() {
    pubsub.unsubscribe(this.pid)
}

Favorite