Enables RxJS reactive functions in Vue
npm install @vueuse/rxjs
> This is an add-on of VueUse, enabling a natural way of using RxJS.
``bash`
npm i @vueuse/rxjs rxjs
- from — wrappers around RxJS's from() and fromEvent() to allow them to accept refstoObserver
- — sugar function to convert a ref into an RxJS ObserveruseExtractedObservable
- — use an RxJS Observable as extracted from one or more composablesuseObservable
- — use an RxJS ObservableuseSubject
- — bind an RxJS Subject to a ref and propagate value changes both waysuseSubscription
- — use an RxJS Subscription without worrying about unsubscribing from it or creating memory leakswatchExtractedObservable
- — watch the values of an RxJS Observable as extracted from one or more composables
`ts
import { from, fromEvent, useObservable } from '@vueuse/rxjs'
import { forkJoin, of } from 'rxjs'
import { ajax } from 'rxjs/ajax'
import { concatAll, map, mergeMap, pluck, scan, take } from 'rxjs/operators'
import { useTemplateRef } from 'vue'
const BASE_URL = 'https://jsonplaceholder.typicode.com'
const button = useTemplateRef('buttonRef')
const posts = useObservable(
fromEvent(button, 'click').pipe(
mergeMap(() => ajax.getJSON(${BASE_URL}/posts).pipe(${BASE_URL}/posts/${id}/comments
concatAll(),
take(4),
mergeMap(({ id, userId, title }) => forkJoin({
id: of(id),
comments: ajax.getJSON().pipe(${BASE_URL}/users/${userId}
map(comments => comments.length),
),
username: ajax.getJSON().pipe(``
pluck('username'),
),
}), 2),
scan((acc, curr) => [...acc, curr], []),
)),
),
)
MIT License © 2019-PRESENT Anthony Fu