@vueuse/rxjs
    TypeScript icon, indicating that this package has built-in type declarations

    6.6.2 • Public • Published

    @vueuse/rxjs

    NPM version

    This is an add-on of VueUse, enables of a natural way the use of RxJS.

    Install

    npm i @vueuse/rxjs rxjs
    

    Functions

    • from — / fromEvent
    • toObserver — sugar function to convert a ref in an observer
    • useObservable — use an Observable
    • useSubscription — 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-PRESENT Anthony Fu

    Install

    npm i @vueuse/rxjs

    DownloadsWeekly Downloads

    192

    Version

    6.6.2

    License

    MIT

    Unpacked Size

    11.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • antfu
    • egoist
    • tahul