Vue-rx
lastmod 2020-10-15created 2020-10-156 edits
$watchAsObservable
This is a prototype method added to instances. You can use it to create an observable from a value watcher. The emitted value is in the format of {newValue, oldValue}
v-stream Directive
Can be used as the starting point of a stream.
domStream
The streams used in the template
can be written like props, as above, and then used within the instance as this.myStream$.
Internally, vue-rx creates subject instances from the values of the domStreams array.
subscriptions()
You can think of the subscriptions method as computed, the difference being that it subscribes to an observable and receives the data. Internally, vue-rx's this.$watchAsObservable uses vue's watch to check whether a value changes, and reports the change through the observer's next method.
Using $watchAsObservable detects changes in data and converts them into an observable.
TypeScript Declaration file
When using TypeScript, you need to add a declaration file. (See TypeScript#Declaration files)
// shims-vue-rx.d.ts
import Vue from 'vue'
import VueRx from 'vue-rx'
import { Observable, Observables, WatchOptions, WatchObservable } from "vue-rx";
declare module "vue/types/vue" {
interface Vue {
$observables: Observables;
$watchAsObservable(expr: string, options?: WatchOptions): Observable<WatchObservable<any>>
$watchAsObservable<T>(fn: (this: this) => T, options?: WatchOptions): Observable<WatchObservable<T>>
$eventToObservable(event: string): Observable<{name: string, msg: any}>
$subscribeTo<T>(
observable: Observable<T>,
next: (t: T) => void,
error?: (e: any) => void,
complete?: () => void): void
$fromDOMEvent(selector: string | null, event: string): Observable<Event>
$createObservableMethod(methodName: string): Observable<any>
}
}