@vueuse/rxjs
v12.0.0
Published
Enables RxJS reactive functions in Vue
Downloads
41,761
Maintainers
Readme
@vueuse/rxjs
This is an add-on of VueUse, enabling a natural way of using RxJS.
Install
npm i @vueuse/rxjs rxjs
Functions
from
— wrappers around RxJS'sfrom()
andfromEvent()
to allow them to acceptref
stoObserver
— sugar function to convert aref
into an RxJS ObserveruseExtractedObservable
— use an RxJSObservable
as extracted from one or more composablesuseObservable
— use an RxJSObservable
useSubject
— bind an RxJSSubject
to aref
and propagate value changes both waysuseSubscription
— use an RxJSSubscription
without worrying about unsubscribing from it or creating memory leakswatchExtractedObservable
— watch the values of an RxJSObservable
as extracted from one or more composables
Example
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 { ref } from 'vue'
const BASE_URL = 'https://jsonplaceholder.typicode.com'
const button = ref<HTMLButtonElement>(null)
const posts = useObservable(
fromEvent(button, 'click').pipe(
mergeMap(() => ajax.getJSON(`${BASE_URL}/posts`).pipe(
concatAll(),
take(4),
mergeMap(({ id, userId, title }) => forkJoin({
id: of(id),
comments: ajax.getJSON(`${BASE_URL}/posts/${id}/comments`).pipe(
map(comments => comments.length),
),
username: ajax.getJSON(`${BASE_URL}/users/${userId}`).pipe(
pluck('username'),
),
}), 2),
scan((acc, curr) => [...acc, curr], []),
)),
),
)
License
MIT License © 2019-PRESENT Anthony Fu