vue-rx

import Vue from 'vue'; import VueRx from 'vue-rx'; import { Subject } from 'rxjs'; import { map, startWith, scan } from 'rxjs/operators'; // Install VueRx as a Vue plugin Vue.use(VueRx); const app = new Vue({ el: '#app', // Define reactive subscriptions for component data subscriptions() { // Create a Subject to stream click events this.plus$ = new Subject<{ event: MouseEvent, data?: any }>(); return { // Bind 'count' data property to an observable stream count: this.plus$.pipe( map(() => 1), // Each click adds 1 startWith(0), // Initial value is 0 scan((total, change) => total + change) // Accumulate total ) }; }, template: ` <div> <h2>Counter: {{ count }}</h2> <!-- Use v-stream to pipe DOM click events into the 'plus$' Subject --> <button v-stream:click="plus$">Increase Count</button> <button @click="console.log('Resetting state often requires another stream or logic.')">Reset (concept)</button> </div> ` });