Vue-Rx

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

BREAKING CHANGES начиная с версии 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 () {
    // объявите принимающие 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 вы также можете передавать дополнительные параметры (передаются вместе с native 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 для просмотра подписок, потому что он обрабатывается до настройки подписок. Но вы можете использовать...