Table of Contents
URL: https://www.progressiverobot.com/vuejs-using-rxjs/
If you come from Angular-land or are a fan of functional programming, you're probably pretty familiar with the concept of observable streams, as implemented most commonly in JS-land by RxJS. Here's a quick guide on using RxJS with Vue.
Installation
Now, Vue doesn't come with <^>RxJS<^> support out-of-the-box like other frameworks might, but it does provide an official plugin, <^>vue-rx<^> that adds the needed bindings.
To use it, install <^>vue-rx<^> and <^>rxjs<^> via Yarn or NPM.
# Yarn
$ yarn add vue-rx rxjs
# NPM
$ npm install vue-rx rxjs --save
In your app, you can then use the plugin by importing <^>RxJS<^> and registering the plugin with Vue using <^>Vue.use()<^>
import Vue from 'vue';
import Rx from 'rxjs/Rx';
import VueRx from 'vue-rx';
// VueRx can use libraries other than RxJS
// that implement the observable interface.
Vue.use(VueRx, Rx)
Automatically-Managed Subscriptions
The most commonly used feature of Rx-framework integrations is usually the ability to have components automatically subscribe and unsubscribe from <^>Observables<^> when the component is created and destroyed. This avoids the memory leakages that commonly occur when subscribing to them manually.
To do this with <^>vue-rx<^>, simply add a <^>subscriptions<^> object to your component that maps parameters to your <^>Observables<^>. The end result is comparable to Angular 2's async pipe.
[label MyComponent.vue]
<template>
<p>{{message$}}</p>
</template>
<script>
import Rx from 'rxjs/Rx';
const messageObservable = Rx.Observable.from(
['Example Message', 'Example Message Final']
);
export default {
subscriptions: {
message$: messageObservable
}
}
</script>
The <^>message$<^> variable should now contain the value Example Message Final and be rendered in your template. The subscription will be automatically destroyed when the component unmounts.
The observable can be accessed inside the component through <^>this.$observables.message<^>.
As with the Angular 2 community, in Vue projects it is generally expected that variables that are observable subscriptions are suffixed with a dollar sign ($).
Other Features
Unique Observables
In the event that you'd like to subscribe to different observables for each instance of a component, you can instead set the <^>subscriptions<^> property to a function that returns an object mapping data properties to observables, as shown below:
export default {
subscriptions() {
return {
message$: messageObservable
}
}
}
Manual Subscription
You can subscribe to an observable inside of a component while still letting <^>vue-rx<^> handle unsubscribing by using <^>this.$subscribeTo(Observable, callback)<^>.
export default {
mounted () {
this.$subscribeTo(messageObservable, function (val) {
console.log(val)
})
}
}
