将 RxJS 与 Vue.js 集成

如果你来自 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}

左边

Published At
Categories with 技术
Tagged with
comments powered by Disqus