mini-vrx

Installation

NPM + ES2015

rxjs is required as a peer dependency.

Take some functions of mini-vrx and make a mini version of vrx, which is enough for your own use

npm install vue mini-vrx rxjs --save

import Vue from 'vue'
import MiniVrx from 'mini-vrx'

Vue.use(MiniVrx)

When bundling via webpack, dist/mini-vrx.esm.js is used by default. It imports the minimal amount of Rx operators and ensures small bundle sizes.

Global Script

To use in a browser environment, use the UMD build dist/mini-vrx.js. When in a browser environment, the UMD build assumes window.rxjs to be already present, so make sure to include mini-vrx.js after Vue.js and RxJS. It also installs itself automatically if window.Vue is present.

Example:

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

Usage

// provide Rx observables with the `subscriptions` option
new Vue({
  el: '#app',
  subscriptions: {
    msg: messageObservable
  }
})

<!-- bind to it normally in templates -->
<div>{{ msg }}</div>

The subscriptions options can also take a function so that you can return unique observables for each component instance:

import { Observable } from 'rxjs'

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

The observables are exposed as vm.$observables:

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

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

Other API Methods

$watchAsObservable(expOrFn, [options])

This is a prototype method added to instances. You can use it to create an observable from a value watcher. The emitted value is in the format of { newValue, oldValue }:

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

const vm = new Vue({
  data: {
    a: 1
  },
  subscriptions () {
    // declaratively map to another property with Rx operators
    return {
      aPlusOne: this.$watchAsObservable('a').pipe(
        pluck('newValue'),
        map(a => a + 1)
      )
    }
  }
})

// or produce side effects...
vm.$watchAsObservable('a')
  .subscribe(
    ({ newValue, oldValue }) => console.log('stream value', newValue, oldValue),
    err => console.error(err),
    () => console.log('complete')
  )

The optional options object accepts the same options as vm.$watch.

$subscribeTo(observable, next, error, complete)

This is a prototype method added to instances. You can use it to subscribe to an observable, but let MiniVrx manage the dispose/unsubscribe.

import { interval } from 'rxjs'

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

$createObservableMethod(methodName)

Convert function calls to observable sequence which emits the call arguments.

This is a prototype method added to instances. Use it to create a shared hot observable from a function name. The function will be assigned as a vm method.

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

const vm = new Vue({
  subscriptions () {
    return {
      // requires `share` operator
      formData: this.$createObservableMethod('submitHandler')
    }
  }
})

You can use the observableMethods option to make it more declarative:

new Vue({
  observableMethods: {
    submitHandler: 'submitHandler$'
    // or with Array shothand: ['submitHandler']
  }
})

The above will automatically create two things on the instance:

1. A submitHandler method which can be bound to in template with v-on;
2. A submitHandler$ observable which will be the stream emitting calls to submitHandler.

example

Caveats

You cannot use the watch option to watch subscriptions, because it is processed before the subscriptions are set up. But you can use $watch in the created hook instead.