@vueuse/rxjs

这是 VueUse 的一个扩展，提供了一种自然使用 RxJS 的方式。

安装

🌐 Install

npm i @vueuse/rxjs rxjs

函数

🌐 Functions

• from — RxJS 的 from() 和 fromEvent() 的封装器，使它们能够接受 ref
• toObserver — 一个将 ref 转换为 RxJS Observer 的糖函数
• useExtractedObservable — 使用从一个或多个组合函数中提取的 RxJS Observable
• useObservable — 使用 RxJS Observable
• useSubject — 将 RxJS Subject 绑定到 ref 并实现双向值变化传递
• useSubscription — 使用 RxJS Subscription 而无需担心取消订阅或造成内存泄漏
• watchExtractedObservable — 观察从一个或多个组合函数中提取的 RxJS Observable 的值

示例

🌐 Example

import { from, fromEvent, useObservable } from '@vueuse/rxjs'
import { forkJoin, of } from 'rxjs'
import { ajax } from 'rxjs/ajax'
import { concatAll, map, mergeMap, pluck, scan, take } from 'rxjs/operators'
import { useTemplateRef } from 'vue'

const BASE_URL = 'https://jsonplaceholder.typicode.com'
const button = useTemplateRef('buttonRef')

const posts = useObservable(
  fromEvent(button, 'click').pipe(
    mergeMap(() => ajax.getJSON(`${BASE_URL}/posts`).pipe(
      concatAll(),
      take(4),
      mergeMap(({ id, userId, title }) => forkJoin({
        id: of(id),
        comments: ajax.getJSON(`${BASE_URL}/posts/${id}/comments`).pipe(
          map(comments => comments.length),
        ),
        username: ajax.getJSON(`${BASE_URL}/users/${userId}`).pipe(
          pluck('username'),
        ),
      }), 2),
      scan((acc, curr) => [...acc, curr], []),
    )),
  ),
)

许可

🌐 License

MIT 许可证 © 2019-至今 Anthony Fu