@vueuse/rxjs

これは VueUse のアドオンで、RxJS を自然に使用する方法を提供します。

インストール

npm i @vueuse/rxjs rxjs

関数

• from — RxJS の from() と fromEvent() のラッパーで、ref を受け入れることができます
• toObserver — ref を RxJS の Observer に変換するためのシュガー関数
• useExtractedObservable — 1つ以上のコンポーザブルから抽出された RxJS Observable を使用
• useObservable — RxJS Observable を使用
• useSubject — RxJS Subject を ref にバインドし、値の変更を双方向に伝播
• useSubscription — RxJS Subscription を使用し、解除やメモリリークを心配することなく利用
• watchExtractedObservable — 1つ以上のコンポーザブルから抽出された RxJS Observable の値を監視

例

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], []),
    )),
  ),
)

ライセンス

MIT License © 2019-PRESENT Anthony Fu