Simple observer pattern implementation for VueJS
Include VueSub after vue. Plugin will be installed automatically.
<script src="link/to/vue"></script>
<script src="https://cdn.jsdelivr.net/gh/eazymov/vue-sub@latest/dist/vue-sub.min.js"></script>
npm install vue-sub --save
yarn add vue-sub
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
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
const observable = new VueSub({
observers: {
'log': [
console.log,
anotherLogHandler,
],
'error': [
console.error,
anotherErrorHandler,
],
},
});
Using inside the component
const componentA = {
mounted () {
this.$observable.subscribe(actionType, handler);
}
}
const componentB = {
handleClick () {
this.$observable.fire(actionType);
}
}
To unsubscribe from an event use $observable.unsubscribe
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
const component = {
mounted () {
this.$observable.once(actionType, handler);
this.$observable.fire(actionType); // fires only once
}
}
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