useSubject

カテゴリ

@RxJS

エクスポートサイズ

235 B

パッケージ

@vueuse/rxjs

最終変更

先週

RxJS Subjectをrefにバインドし、値の変更を双方向に伝播します。

デモ

ソース

@vueuse/rxjsアドオンで利用可能です。

使い方

import { useSubject } from '@vueuse/rxjs'
import { Subject } from 'rxjs'

const subject = new Subject()

// setup()
const subjectRef = useSubject(subject)

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

import { useSubject } from '@vueuse/rxjs'
import { Subject } from 'rxjs'

const subject = new Subject()

// setup()
const subjectRef = useSubject(subject, {
  onError: (err) => {
    console.log(err.message) // "oops"
  },
},)

型宣言

typescript

export interface UseSubjectOptions<I = undefined>
  extends Omit<UseObservableOptions<I>, "initialValue"> {}
export declare function useSubject<H>(
  subject: BehaviorSubject<H>,
  options?: UseSubjectOptions,
): Ref<H>
export declare function useSubject<H>(
  subject: Subject<H>,
  options?: UseSubjectOptions,
): Ref<H | undefined>