跳到主要内容

useExtractedObservable

分类
导出大小
344 B
@vueuse/rxjs
上次更改
2 个月前

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

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

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

用法

ts
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)
js
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'))。

ts
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 配置。

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

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

类型声明

显示类型声明
ts
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
>>

来源

源代码文档

贡献者

Anthony Fu
IlyaL
Anthony Fu
Arthur Darkstone
SerKo
Robin
OrbisK
Voltra

更新日志

00a72 - fix(types): 更新 watch 函数的类型转换以使用 WatchSource (#4966)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
v10.5.0
23b8c - feat(rxjs): 添加 useExtractedObservable 和 watchExtractedObservable (#3453)

根据 MIT 许可证发布。