VueUse@vueuse/rxjs
This is an add-on of VueUse, enables of a natural way the use of RxJS.
Install
npm i @vueuse/rxjs rxjs
Functions
from— / fromEventtoObserver— sugar function to convert arefinto an RxJS ObserveruseObservable— use an RxJSObservableuseSubject— bind an RxJSSubjectto arefand propagate value changes both waysuseSubscription— use an RxJSSubscriptionwithout worrying about unsubscribing from it or creating memory leaks
Example
ts
import { from, fromEvent, useObservable } from '@vueuse/rxjs'
import { ref } from 'vue'
import { forkJoin, of } from 'rxjs'
import { ajax } from 'rxjs/ajax'
import { concatAll, map, mergeMap, pluck, scan, take } from 'rxjs/operators'
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], []),
)),
),
)
import { from, fromEvent, useObservable } from '@vueuse/rxjs'
import { ref } from 'vue'
import { forkJoin, of } from 'rxjs'
import { ajax } from 'rxjs/ajax'
import { concatAll, map, mergeMap, pluck, scan, take } from 'rxjs/operators'
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