useObservable

RxJS の Observable を使用し、ref を返し、コンポーネントがアンマウントされるときに自動的に購読を解除します。

使用法

import { useObservable } from '@vueuse/rxjs'
import { interval } from 'rxjs'
import { mapTo, scan, startWith } from 'rxjs/operators'

// setup()
const count = useObservable(
  interval(1000).pipe(
    mapTo(1),
    startWith(0),
    scan((total, next) => next + total),
  ),
)

エラーを起こす可能性のある Observable にカスタムエラーハンドリングを追加したい場合は、オプションの onError 設定を提供できます。これがない場合、RxJS は提供された Observable 内のエラーを「未処理のエラー」として扱い、新しいコールスタックでスローされ、window.onerror（または Node を使用している場合は process.on('error')）に報告されます。

import { useObservable } from '@vueuse/rxjs'
import { interval } from 'rxjs'
import { map } from 'rxjs/operators'

// setup()
const count = useObservable(
  interval(1000).pipe(
    map((n) => {
      if (n === 10)
        throw new Error('oops')

      return n + n
    }),
  ),
  {
    onError: (err) => {
      console.log(err.message) // "oops"
    },
  },
)