vue-rx

Интеграция RxJS v6+ в Vue.js.

Относительно несовместимых изменений версии 5.0

• vue-rx версии 6 теперь по умолчанию работает только с RxJS V6+. Если вы хотите продолжить использовать код в стиле RxJS v5, установите rxjs-compat.

Установка

NPM + ES2015

rxjs необходимо импортировать как peer dependency.

npm install vue vue-rx rxjs --save

import Vue from 'vue';
import VueRx from 'vue-rx';

Vue.use(VueRx);

webpack по умолчанию будет использовать dist/vue-rx.esm.js. Это позволяет импортировать минимальное количество операторов Rx и обеспечивает минимальный размер пакета.

Глобальные скрипты

Если вы хотите использовать его в среде браузера, вам нужно импортировать UMD сборку dist/vue-rx.js. В среде браузера UMD сборка предполагает, что window.rxjs уже существует, поэтому вам необходимо убедиться, что вы импортируете vue-rx.js после Vue.js и RxJS. Если window.Vue существует, vue-rx установится автоматически.

Пример:

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../dist/vue-rx.js"></script>

Использование

// Предоставьте Rx observables через опцию subscriptions
new Vue({
  el: '#app',
  subscriptions: {
    msg: messageObservable
  }
});

<!-- Привязать к шаблону -->
<div>{{ msg }}</div>

Опция subscriptions также может принимать функцию, чтобы можно было возвращать уникальные observables для каждого экземпляра компонента:

import { Observable } from 'rxjs'

Vue.component('foo', {
  subscriptions: function () {
    return {
      msg: new Observable(...)
    }
  }
})

Observables будут доступны через vm.$observables.

const vm = new Vue({
  subscriptions: {
    msg: messageObservable
  }
});

vm.$observables.msg.subscribe(msg => console.log(msg));

v-stream: потоковые события DOM

vue-rx предоставляет v-stream, который позволяет отправлять события DOM в поток Rx. Синтаксис похож на v-on, где параметр директивы соответствует имени события, а значение привязки соответствует Rx Subject.

<button v-stream:click="plus$">+</button>

Обратите внимание, что перед рендерингом вам необходимо объявить экземпляр Rx.Subject — plus$ — на экземпляре vm, как если бы вы объявляли данные. Вы также можете сделать это в функции subscriptions.

import { Subject } from 'rxjs';
import { map, startWith, scan } from 'rxjs/operators';

new Vue({
  subscriptions() {
    // Объявить принимаемые Subjects
    this.plus$ = new Subject();
    // ...затем использовать Subjects в качестве источника потока для создания подписки.
    // Источник потока отправляет данные в формате `{ event: HTMLEvent, data?: any }`
    return {
      count: this.plus$.pipe(
        map(() => 1),
        startWith(0),
        scan((total, change) => total + change)
      )
    };
  }
});

Или используйте опцию domStreams для краткости:

new Vue({
  // Необходимо передать Rx в Vue.use(), чтобы раскрыть Subject
  domStreams: ['plus$'],
  subscriptions() {
    // Используйте this.plus$
  }
});

Наконец, используйте другой синтаксис для передачи дополнительных данных в поток:

<button v-stream:click="{ subject: plus$, data: someData }">+</button>

Это очень полезно, когда вам нужно передать временные переменные шаблона, такие как v-for, вместе с потоком. Вы можете напрямую извлекать нужные данные из исходного потока.

const plusData$ = this.plus$.pipe(pluck('data'));

С версии 3.1 вы можете передавать дополнительные параметры (как третий параметр, передаваемый непосредственно в addEventListener):

<button v-stream:click="{
  subject: plus$,
  data: someData,
  options: { once: true, passive: true, capture: true }
}">+</button>

Для получения более подробной информации см. пример.

v-stream: Потоковая передача пользовательских событий от дочерних компонентов

Подобно потоковым событиям DOM, v-stream также можно использовать для компонентов, создавая наблюдаемые объекты на основе пользовательских событий, запускаемых дочерними компонентами. Он работает аналогично v-on:

<div>
  <!-- Пользовательский компонент -->
  <pagination v-on:change="pageChanged()"></pagination>

  <!-- Использовать v-stream на пользовательском компоненте -->
  <pagination v-stream:change="pageChange$"></pagination>
</div>

Другие API-методы

$watchAsObservable(expOrFn, [options])

Этот метод добавляется к прототипу экземпляра. Вы можете создать observable на основе значения слушателя. Значение будет срабатывать в формате { newValue, oldValue }:

import { pluck, map } from 'rxjs/operators';

const vm = new Vue({
  data: {
    a: 1
  },
  subscriptions() {
    // Использовать операторы Rx для декларативного сопоставления с другим свойством
    return {
      aPlusOne: this.$watchAsObservable('a').pipe(
        pluck('newValue'),
        map(a => a + 1)
      )
    };
  }
});

// Или вызвать побочный эффект...
vm.$watchAsObservable('a').subscribe(
  ({ newValue, oldValue }) => console.log('поток значений', newValue, oldValue),
  err => console.error(err),
  () => console.log('завершено')
);

Необязательный объект options принимает те же параметры, что и vm.$watch.

$eventToObservable(event)

Преобразует vue.$on (включая события жизненного цикла) в Observables. Значение будет срабатывать в формате { name, msg }:

import { interval } from 'rxjs';
import { take, takeUntil } from 'rxjs/operators';

const vm = new **Vue({**
  created() {
    this.$eventToObservable('customEvent').subscribe(event =>
      console.log(event.name, event.msg)
    );
  }
**});**

// `vm.$once` 的 `vue-rx` 版本
this.$eventToObservable('customEvent').pipe(take(1));

// 另一种取消订阅的方法：
let beforeDestroy$ = this.$eventToObservable('hook:beforeDestroy').pipe(
  take(1)
);

interval(500).pipe(takeUntil(beforeDestroy$));

$subscribeTo(observable, next, error, complete)

Это метод, который добавляется к прототипу экземпляра. С его помощью можно подписаться на observable, но VueRx будет управлять его dispose/unsubscribe.

import { interval } from 'rxjs';

const vm = new Vue({
  mounted() {
    this.$subscribeTo(interval(1000), function(count) {
      console.log(count);
    });
  }
});

$fromDOMEvent(selector, event)

Этот метод также добавляется к прототипу экземпляра и позволяет создавать observable на основе DOM-событий элементов внутри экземпляра. Он похож на Rx.Observable.fromEvent и может быть полезен даже до рендеринга DOM в функции subscriptions.

selector используется для поиска потомков корневого элемента компонента. Если вы хотите отслеживать события на самом корневом элементе, передайте null в качестве первого параметра.

import { pluck } from 'rxjs/operators';

const vm = new Vue({
  subscriptions() {
    return {
      inputValue: this.$fromDOMEvent('input', 'keyup').pipe(
        pluck('target', 'value')
      )
    };
  }
});

$createObservableMethod(methodName)

Преобразует вызовы функций в observable-очередь с выводом параметров вызова.

Этот метод добавляется к прототипу экземпляра и создаёт общий и горячий observable на основе имени функции. Функция присваивается методу vm.

<custom-form :onSubmit="submitHandler"></custom-form>

const vm = new Vue({
  subscriptions() {
    return {
      // 需要 `share` 操作符
      formData: this.$createObservableMethod('submitHandler')
    };
  }
});

Вы можете использовать опцию observableMethods, чтобы сделать код более декларативным:

new Vue({
  observableMethods: {
    submitHandler: 'submitHandler$'
    // 或者使用数组简写: ['submitHandler']
  }
});

Приведённый выше код автоматически создаст две вещи на экземпляре:

1. Метод submitHandler, который можно привязать к шаблону с помощью v-on.
2. Observable submitHandler$, который можно вызывать потоково.

Пример

Внимание!

Нельзя использовать опцию watch для отслеживания подписок (subscriptions), так как она обрабатывается до установки подписок. Однако вы можете использовать $watch в хуке created в качестве альтернативы.

Пример

В каталоге /examples вы найдёте несколько простых примеров.

Лицензия

MIT