VueUse

Appearance

Return to top
On this page

@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 — / fromEvent
  • toObserver — sugar function to convert a ref in an observer
  • useObservable — use an Observable
  • useSubject — bind Subject to ref and propagate value changes both ways
  • 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], [])
    ))
  )
)

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