useExtractedObservable

分类

@RxJS

导出大小

344 B

包

@vueuse/rxjs

上次更改

2 个月前

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

当 observable 发生变化时自动取消订阅，并在组件卸载时自动取消订阅。

支持与 watch 所有重载匹配的签名。可在 @vueuse/rxjs 附加组件中使用。

用法

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')）。

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

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

类型声明

显示类型声明

export interface UseExtractedObservableOptions
<E
>
  extends UseObservableOptions<E
> {
  onComplete
?: () => void
}
export declare function useExtractedObservable
<
  T
 extends MultiWatchSources
,
  E
,
  Immediate
 extends Readonly
<boolean> = false,
>(
  sources
: [...T
],
  extractor
: WatchExtractedObservableCallback
<
    MapSources
<T
>,
    MapOldSources
<T
, Immediate
>,
    E

  >,
  options
?: UseExtractedObservableOptions
<E
>,
  watchOptions
?: WatchOptions
<Immediate
>,
): Readonly
<ShallowRef
<E
>>
export declare function useExtractedObservable
<
  T
 extends Readonly
<MultiWatchSources
>,
  E
,
  Immediate
 extends Readonly
<boolean> = false,
>(
  sources
: T
,
  extractor
: WatchExtractedObservableCallback
<
    MapSources
<T
>,
    MapOldSources
<T
, Immediate
>,
    E

  >,
  options
?: UseExtractedObservableOptions
<E
>,
  watchOptions
?: WatchOptions
<Immediate
>,
): Readonly
<ShallowRef
<E
>>
export declare function useExtractedObservable
<
  T
,
  E
,
  Immediate
 extends Readonly
<boolean> = false,
>(
  sources
: WatchSource
<T
>,
  extractor
: WatchExtractedObservableCallback
<
    T
,
    Immediate
 extends true ? T
 | undefined : T
,
    E

  >,
  options
?: UseExtractedObservableOptions
<E
>,
  watchOptions
?: WatchOptions
<Immediate
>,
): Readonly
<ShallowRef
<E
>>
export declare function useExtractedObservable
<
  T
 extends object,
  E
,
  Immediate
 extends Readonly
<boolean> = false,
>(
  sources
: T
,
  extractor
: WatchExtractedObservableCallback
<
    T
,
    Immediate
 extends true ? T
 | undefined : T
,
    E

  >,
  options
?: UseExtractedObservableOptions
<E
>,
  watchOptions
?: WatchOptions
<Immediate
>,
): Readonly
<ShallowRef
<E
>>