watchExtractedObservable

类别

@RxJS

导出大小

250 B

包

@vueuse/rxjs

最近修改

2 days ago

观察从一个或多个组合函数中提取的 RxJS Observable 的值。

🌐 Watch the values of an RxJS Observable as extracted from one or more composables.

自动取消订阅可观察到的更改，并在卸载组件时自动取消订阅。

🌐 Automatically unsubscribe on observable change, and automatically unsubscribe from it when the component is unmounted.

支持 watch 的所有重载。

🌐 Supports all overloads of watch. Available in the @vueuse/rxjs add-on.

用法

🌐 Usage

import { watchExtractedObservable } from '@vueuse/rxjs'
import { computed, reactive, useTemplateRef } from 'vue'
import { AudioPlayer } from '../my/libs/AudioPlayer'

// setup()

const audio = useTemplateRef('audio')
const player = computed(() => (audio.value ? new AudioPlayer(audio.value) : null))
const state = reactive({
  progress: 0,
})

watchExtractedObservable(player, p => p.progress$, (percentage) => {
  state.progress = percentage * 100
})

如果你想为可能出错的 Observable 添加自定义错误处理，你可以提供一个可选的 onError 配置。如果没有这个配置，RxJS 会将提供的 Observable 中的任何错误视为“未处理的错误”，并将在新的调用栈中抛出，并报告给 window.onerror（如果你在 Node 中，则报告给 process.on('error')）。

🌐 If you want to add custom error handling to an Observable that might error, you can supply an optional onError configuration. Without this, RxJS will treat any error in the supplied Observable as an "unhandled error" and it will be thrown in a new call stack and reported to window.onerror (or process.on('error') if you happen to be in Node).

如果你需要在被观察的可观察对象完成时附加特殊行为，你也可以提供一个可选的 onComplete 配置。

🌐 You can also supply an optional onComplete configuration if you need to attach special behavior when the watched observable completes.

TypeScript

import { watchExtractedObservable } from '@vueuse/rxjs'
import { computed, reactive, useTemplateRef } from 'vue'
import { AudioPlayer } from '../my/libs/AudioPlayer'

// setup()

const audio = useTemplateRef('audio')
const player = computed(() => (audio.value ? new AudioPlayer(audio.value) : null))
const state = reactive({
  progress: 0,
})

watchExtractedObservable(player, p => p.progress$, (percentage) => {
  state.progress = percentage * 100
}, {
  onError: (err: unknown) => {
    console.error(err)
  },
  onComplete: () => {
    state.progress = 100 // or 0, or whatever
  },
})

import { watchExtractedObservable } from '@vueuse/rxjs'
import { computed, reactive, useTemplateRef } from 'vue'
import { AudioPlayer } from '../my/libs/AudioPlayer'
// setup()
const audio = useTemplateRef('audio')
const player = computed(() =>
  audio.value ? new AudioPlayer(audio.value) : null,
)
const state = reactive({
  progress: 0,
})
watchExtractedObservable(
  player,
  (p) => p.progress$,
  (percentage) => {
    state.progress = percentage * 100
  },
  {
    onError: (err) => {
      console.error(err)
    },
    onComplete: () => {
      state.progress = 100 // or 0, or whatever
    },
  },
)

如果你愿意，你也可以将 watch 选项作为最后一个参数传入：

🌐 If you want, you can also pass watch options as the last argument:

TypeScript

import { watchExtractedObservable } from '@vueuse/rxjs'
import { computed, reactive, useTemplateRef } from 'vue'
import { AudioPlayer } from '../my/libs/AudioPlayer'

// setup()

const audio = useTemplateRef('audio')
const player = computed(() => (audio.value ? new AudioPlayer(audio.value) : null))
const state = reactive({
  progress: 0,
})

watchExtractedObservable(player, p => p.progress$, (percentage) => {
  state.progress = percentage * 100
}, {
  onError: (err: unknown) => {
    console.error(err)
  }
}, {
  immediate: true
})

import { watchExtractedObservable } from '@vueuse/rxjs'
import { computed, reactive, useTemplateRef } from 'vue'
import { AudioPlayer } from '../my/libs/AudioPlayer'
// setup()
const audio = useTemplateRef('audio')
const player = computed(() =>
  audio.value ? new AudioPlayer(audio.value) : null,
)
const state = reactive({
  progress: 0,
})
watchExtractedObservable(
  player,
  (p) => p.progress$,
  (percentage) => {
    state.progress = percentage * 100
  },
  {
    onError: (err) => {
      console.error(err)
    },
  },
  {
    immediate: true,
  },
)

订阅选项

🌐 Subscription Options

选项	类型	描述
onError	(err: unknown) => void	Observable 错误的错误处理器
onComplete	() => void	当 Observable 完成时调用

返回值

🌐 Return Value

返回一个可以用来停止观察的 WatchHandle：

🌐 Returns a WatchHandle that can be used to stop watching:

import { watchExtractedObservable } from '@vueuse/rxjs'
import { ref } from 'vue'

const source = ref({ data$: null })

const stop = watchExtractedObservable(source, s => s.data$, (data) => {
  console.log(data)
})

// Later, stop watching
stop()