Package Exports
- @vueuse/rxjs
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vueuse/rxjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@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
- /RxJS
from— two wrappers around of the original functions to allow use ref objectstoObserver— sugar function to convert a ref in an observeruseObservable— use an ObservableuseSubscription— uses subscriptions without worry about unsubscribing to it or memory leaks
📄 Example
import { fromEvent, from, useObservable } from '@vueuse/rxjs'
import { ref } from 'vue'
import { of, forkJoin } from 'rxjs'
import { ajax } from 'rxjs/ajax'
import { take, mergeMap, concatAll, pluck, map, scan } 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-2020 Anthony Fu