Vue-Rx

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

BREAKING CHANGES from 5.0

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

Установка

NPM + ES2015

rxjs требуется как зависимость на равных правах.

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 присутствует.

Пример:

<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 с опцией `subscriptions`
new Vue({
  el: '#app',
  subscriptions: {
    msg: messageObservable
  }
})

<!-- привяжите его обычно в шаблонах -->
<div>{{ msg }}</div>

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

import { Observable } from 'rxjs'

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

Наблюдаемые объекты доступны как 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 Subject. Синтаксис аналогичен v-on, где аргументом директивы является имя события, а значением привязки — целевой Rx Subject.

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

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

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

new Vue({
  subscriptions () {
    // объявите принимающие субъекты
    this.plus$ = new Subject()
    // ...затем создайте подписки, используя потоки субъектов в качестве исходного потока.
    // исходный поток излучает в формате `{ 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])

Это прототипный метод, добавленный к экземплярам. Вы можете использовать его для создания наблюдаемого объекта из средства отслеживания значений. Испускаемое значение имеет формат { 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('завершено')
  )

Необязательный объект параметров принимает те же параметры, что и 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)

Это прототипный метод, добавленный к экземплярам. Вы можете использовать его, чтобы подписаться на наблюдаемый объект, но позвольте VueRx управлять удалением/отменой подписки.

import { interval } from 'rxjs'

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

$fromDOMEvent(selector, event)

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

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

import { pluck } from 'rxjs/operators'

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

$createObservableMethod(methodName)

Преобразование вызовов функций в наблюдаемую последовательность, которая испускает аргументы вызова.

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

<custom-form :onSubmit="submitHandler"></custom-form>
``` ``` js
const vm = new Vue({
  subscriptions () {
    return {
      // требует оператора `share`
      formData: this.$createObservableMethod('submitHandler')
    }
  }
})

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

new Vue({
  observableMethods: {
    submitHandler: 'submitHandler$'
    // или с сокращением массива: ['submitHandler']
  }
})

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

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

пример

Предостережения

Нельзя использовать параметр watch для просмотра подписок, потому что он обрабатывается до настройки подписок. Но вы можете использовать Используйте $watch в хуке created.

Example

См. /examples для ознакомления с некоторыми простыми примерами.

License

MIT