useExtractedObservable
使用从一个或多个组合式函数中提取的 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,
},
)类型声明
显示类型声明
typescript
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
OrbisK
Voltra