useObservable

カテゴリ

@RxJS

エクスポートサイズ

212 B

パッケージ

@vueuse/rxjs

最終更新

先週

RxJSのObservableを使用し、refを返し、コンポーネントがアンマウントされたときに自動的にunsubscribeします。 @vueuse/rxjsアドオンで利用できます。

使用方法

TypeScript

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

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

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')）に報告されます。

TypeScript

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

// 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"
    },
  },
)

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"
    },
  },
)

型宣言

typescript

export interface UseObservableOptions<I> {
  onError?: (err: any) => void
  /**
   * The value that should be set if the observable has not emitted.
   */
  initialValue?: I | undefined
}
export declare function useObservable<H, I = undefined>(
  observable: Observable<H>,
  options?: UseObservableOptions<I | undefined>,
): Readonly<Ref<H | I>>