如果你来自 Angular 或是功能编程的粉丝,那么你可能对可观察流的概念非常熟悉,因为它最常被 RxJS 在 JS 国家实施。
安装
现在,Vue 没有像其他框架一样提供 RxJS 支持,但它确实提供了官方的插件 vue-rx,添加了所需的绑定。
要使用它,请通过 Yarn 或 NPM 安装 vue-rx 和 rxjs。
1# Yarn
2$ yarn add vue-rx rxjs
3
4# NPM
5$ npm install vue-rx rxjs --save
在您的应用程序中,您可以通过导入 RxJS 并使用 Vue.use() 注册插件来使用插件。
1import Vue from 'vue';
2import Rx from 'rxjs/Rx';
3import VueRx from 'vue-rx';
4
5// VueRx can use libraries other than RxJS
6// that implement the observable interface.
7Vue.use(VueRx, Rx)
自动管理订阅
Rx-framework 集成中最常用的功能通常是能够在创建和破坏组件时自动从 Observables 订阅和取消订阅的组件。
要做到这一点,只需将一个订阅对象添加到您的组件中,该组件将参数绘制到您的 Observables. 最终结果与 Angular 2 的 async 管道相比较。
1[label MyComponent.vue]
2<template>
3 <p>{{message$}}</p>
4</template>
5
6<script>
7 import Rx from 'rxjs/Rx';
8
9 const messageObservable = Rx.Observable.from(
10 ['Example Message', 'Example Message Final']
11 );
12
13 export default {
14 subscriptions: {
15 message$: messageObservable
16 }
17 }
18</script>
message$ 变量现在应该包含值 Example Message Final,并在您的模板中进行渲染。
可通过 this.$observables.message 访问组件内部的可观察。
<$>[注] 与 Angular 2 社区一样,在 Vue 项目中,通常预计是可观察的订阅的变量以美元符号($)为补丁。
其他特征
独特观察
如果您想为组件的每个实例订阅不同的可观察性,则可以将订阅属性设置为返回对象对观察性数据的属性函数,如下所示:
1export default {
2 subscriptions() {
3 return {
4 message$: messageObservable
5 }
6 }
7}
手动订阅
您可以订阅组件内的可观察的内容,同时允许 vue-rx 处理取消订阅,使用此。
1export default {
2 mounted () {
3 this.$subscribeTo(messageObservable, function (val) {
4 console.log(val)
5 })
6 }
7}