Vue-geb - Global Event Bus
Vue-geb is a vue Global Event Bus plugin to help broadcast events across the app using the power of observables.
Install
npm install --save vue-geb
Use
In your main.js
:
import geb from 'vue-geb'
Vue.use(geb)
How do i emit an event in the global Event Bus ?
2 ways :
With a directive :
<button v-geb-click-emit="{id:'foo',payload:'Lorem'}">Send</button>
When clicked, an event containing {id:'foo',payload:'Lorem'}
is emitted inside the Global Event Bus. (Note: you are not constrained by any format, the object format you send is up to you).
At the moment you cant use component data in the directive. You can still use vue directives to trigger a component custom method.
With a method inside a Vue Component :
methods: {
sendToBus: function(){
this.$geb.emit({id:'someId',payload:this.itCanAlsoBeData})
}
}
You can emit event with this method : this.$geb.emit(data)
How do i listen to the Global Event Bus ?
Listen to all the events:
created: function () {
this.sub = this.$geb.getBus().subscribe(data => {
console.log(data)
// Do anything you want with 'data'
})
},
Be notified by specific events:
created: function () {
this._sub = this.$geb.getFilteredBus({id: 'foo'}).subscribe(data => {
// you only get events containing at least the attribute id equal to 'foo'
}
)
},
Don't forget to unsubscribe
when you destroy the component to avoid memory leak
destroyed: function () {
if(this.sub) {
this.sub.unsubscribe()
}
},