Vue 也能享受 RxJS 的強大威力

若說 Ramda 是 FP 在 ECMAScript 對於 同步 的解決方案,RxJS 則是 FP 在 ECMAScript 對於 非同步 的解決方案。

RxJS 在 Angular 2 之後已經是 framework 的標準配備,Vue 也由官方將 RxJS 6 整合進 Vue,稱為 Vue-rx。

Version


Vue 2.5.21
Vue-rx 6.1.0
RxJS 6.3.3

安裝 Vue-rx


1
$  yarn add vue-rx rxjs

雖然 Vue-rx 是 Vue 官方所維護,但目前 Vue-rx 並不像 Vuex 可透過 Vue CLI,必須自行使用 Yarn 安裝。

vue-rx000

vue-rx001

  1. 安裝完會發現在專案根目錄的 package.json 多了 rxjsvue-rx

Main.js


main.js

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue';
import VueRx from 'vue-rx';
import App from './App.vue';

Vue.use(VueRx);
Vue.config.productionTip = false;

new Vue({
render: h => h(App),
}).$mount('#app');

第 2 行

1
import VueRx from 'vue-rx';

Import vue-rx

第 5 行

1
Vue.use(VueRx);

讓 Vue instance 可以使用 VueRx。

Component


HelloWorld.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<h1>{{ interval$ }}</h1>
</template>

<script>
import { interval } from 'rxjs';

export default {
name: 'HelloWorld',
subscriptions: () => ({
interval$: interval(1000),
}),
};
</script>

首先來看最簡單的 Vue-rx 應用。

第 6行

1
import { interval } from 'rxjs';

先 import RxJS 的 interval()

10 行

1
2
3
subscriptions: () => ({
interval$: interval(1000),
}),

Vue-rx 提供了 subscriptions,專門放置 Rxjs 的 Observable

其中 subscriptions 如同 datacomputed 一樣都是 function,回傳的是 object。

Observable 建議的命名方式是在名稱後面加上 $,其值為 RxJS 的 interval(),每 1 秒鐘會送出新的值。

第 1 行

1
2
3
<template>
<h1>{{ interval$ }}</h1>
</template>

在 HTML template 可直接使用在 subscriptions 定義的 Observable

vue-rx002

  • 執行後會發現 interval$ 不斷地遞增
1
2
3
4
5
6
7
subscriptions: () => {
const interval$ = interval(1000);

return {
interval$,
};
},

RxJS 還會搭配許多 operator,不太可能只回傳 object,實務上我們常會寫成 function,最後再 return object。

Conclusion


  • 這就是最簡單的 Vue + Vue-rx,重點先將環境裝好,日後才能練習更進階的應用

Sample Code


完整的範例可以在我的 GitHub 上找到

Reference


Vue, vuejs/vue-rx
RxJS, ReactiveX/rxjs
Egghead.io, Build Async Vue.js Apps with RxJS

2019-02-05