在vue3中使用rxjs写一个广播事件

之前在使用angular的时候有用到使用rxjs封装的一个广播service，用起来很是顺手。现在切换到了vue3，对那个service甚是怀念，本着生命在于折腾的原则，我们就在vue3中来搞搞事。

首先我们先写一个broadcast类 broadcast.ts

import   {Observable, Subject}  from 'rxjs'
export class Broadcast {
     subjectsMap = new Map();
    broadcast(type: string, msg: any) {
       if(this.subjectsMap.has(type)) {
           const subject = this.subjectsMap.get(type);
           subject.next(msg)
       }
    }

    on(type): Observable<any> {
        let subject = this.subjectsMap.get(type)
        if(!subject) {
            subject = new Subject();
            this.subjectsMap.set(type, subject)
        }
        return subject.asObservable()
    }

    install(app) {
        app.config.globalProperties.$broadcast = this;
    }
}

然后在main.ts中将我们的类的实例全局挂载

import { Broadcast } from 'broadcast'
const broadcast = new Broadcast();
app.use(broadcast)

ok,接下来就是在组建中使用了

发送方

this.$broadcast.broadcast('event', 'hello world');

接收方

this.$broadcast.on('event').subscribe((msg) => {
    console.log(msg)
})

最后不要忘了unsubscribe，不然会一直接收广播哦。