useExtractedObservable

类别

@RxJS

导出大小

341 B

包

@vueuse/rxjs

最近修改

2 days ago

使用从一个或多个 composable 中提取的 RxJS Observable，返回一个 ref，并在组件卸载时自动取消订阅。

🌐 Use an RxJS Observable as extracted from one or more composables, return a ref, and automatically unsubscribe from it when the component is unmounted.

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

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

支持与 watch 的所有重载匹配的签名。

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

用法

🌐 Usage

TypeScript

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)

import { useExtractedObservable } from '@vueuse/rxjs'
import ObservableSocket from 'observable-socket'
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')）。

🌐 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).

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

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

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

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 选项作为最后一个参数传入：

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

TypeScript

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

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

选项

🌐 Options

选项	类型	描述
initialValue	T	在 Observable 发出值之前使用的值
onError	(err: any) => void	Observable 出现错误时的处理函数
onComplete	() => void	Observable 完成时调用的函数

返回值

🌐 Return Value

返回一个只读的 ShallowRef，其中包含由提取的 Observable 发出的最新值。

🌐 Returns a readonly ShallowRef containing the latest value emitted by the extracted Observable.