Simple observer pattern implementation for VueJS
npm install vue-sub
> Simple observer pattern implementation for VueJS
Include VueSub after vue. Plugin will be installed automatically.
``html`
`bash`
npm install vue-sub --save
`bash`
yarn add vue-sub
`javascript
import Vue from 'vue';
import VueSub from 'vue-sub';
Vue.use(VueSub);
`
You don't need to do this when using global script tags.
Creating the observable
`javascript
import Vue from 'vue';
import VueSub from 'vue-sub';
Vue.use(VueSub);
const observable = new VueSub();
const app = new Vue({
observable,
});
`
You can create VueSub instance with existing observers
`javascript`
const observable = new VueSub({
observers: {
'log': [
console.log,
anotherLogHandler,
],
'error': [
console.error,
anotherErrorHandler,
],
},
});
Using inside the component
`javascript
const componentA = {
mounted () {
this.$observable.subscribe(actionType, handler);
}
}
const componentB = {
handleClick () {
this.$observable.fire(actionType);
}
}
`
To unsubscribe from an event use $observable.unsubscribe
`javascript`
const component = {
mounted () {
this.$observable.subscribe(actionType, handler);
this.$observable.unsubscribe(actionType, handler);
this.$observable.fire(actionType); // won't work
}
}
If you want to react to an event only once, you can use $observable.once
`javascript`
const component = {
mounted () {
this.$observable.once(actionType, handler);
this.$observable.fire(actionType); // fires only once
}
}
`javascript
import Vue from 'vue';
import { Action, Subscribe, Once } from 'vue-sub';
@Component
export class MyComponent extends Vue {
@Action('foo')
public actionFoo: (params: Params) => void;
@Subscribe('bar')
public handler (): void {
// Fires every time 'bar' emits
}
@Once('bar')
public anotherHandler (): void {
// Fires only once
}
public created (): void {
this.actionFoo(params); // -> $observable.fire('foo', params);
}
}
``
If you have any troubles or questions you can create the issue or text me on email any time
Copyright (c) 2017 - present, Eduard Troshin