useExtractedObservable

RxJS の Observable を一つ以上のコンポーザブルから抽出して使用し、ref を返し、コンポーネントがアンマウントされたときに自動的に購読を解除します。

Observable の変更時に自動的に購読を解除し、コンポーネントがアンマウントされたときにも自動的に購読を解除します。

watch のすべてのオーバーロードに一致するシグネチャをサポートします。

使用法

import { useExtractedObservable } from '@vueuse/rxjs'
import ObservableSocket from 'observable-socket'
import { computed } from 'vue'
import { makeSocket, useUser } from '../some/lib/func'

// setup()
const user = useUser()
const lastMessage = useExtractedObservable(user, u => ObservableSocket.create(makeSocket(u.id)).down)

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

import { useExtractedObservable } from '@vueuse/rxjs'
import { interval } from 'rxjs'
import { mapTo, scan, startWith, tap } from 'rxjs/operators'
import { shallowRef } from 'vue'

// setup()
const start = shallowRef(0)

const count = useExtractedObservable(
  start,
  (start) => {
    return interval(1000).pipe(
      mapTo(1),
      startWith(start),
      scan((total, next) => next + total),
      tap((n) => {
        if (n === 10)
          throw new Error('oops')
      })
    )
  },
  {
    onError: (err) => {
      console.log(err.message) // "oops"
    },
  }
)

監視している observable が完了したときに特別な動作を付けたい場合は、オプションの onComplete 設定を提供することもできます。

import { useExtractedObservable } from '@vueuse/rxjs'
import { interval } from 'rxjs'
import { mapTo, scan, startWith, takeWhile } from 'rxjs/operators'
import { shallowRef } from 'vue'

// setup()
const start = shallowRef(0)

const count = useExtractedObservable(
  start,
  (start) => {
    return interval(1000).pipe(
      mapTo(1),
      startWith(start),
      scan((total, next) => next + total),
      takeWhile(num => num < 10)
    )
  },
  {
    onComplete: () => {
      console.log('Done!')
    },
  }
)

必要に応じて、最後の引数として watch オプションを渡すこともできます：

import { useExtractedObservable } from '@vueuse/rxjs'
import { interval } from 'rxjs'
import { mapTo, scan, startWith, takeWhile } from 'rxjs/operators'
import { shallowRef } from 'vue'

// setup()
const start = shallowRef<number>()

const count = useExtractedObservable(
  start,
  (start) => {
    return interval(1000).pipe(
      mapTo(1),
      startWith(start),
      scan((total, next) => next + total),
      takeWhile(num => num < 10)
    )
  },
  {},
  {
    immediate: false
  }
)