Integrating-RxJS-with-Vue.js.md

如果你学过Angular或者熟悉函数式编程，你可能对 RxJs 实现的 Observable 概念十分熟悉。本文是在Vue中使用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

现在，可能不像其他框架一样，RxJS拥有官方插件支持 -- vue-rx，它满足了所有的需求。 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.

为了使用它，你需要先用 Yarn 或 NPM 安装 vue-rx。 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

在应用中，你可以引入 RxJS，并且使用 Vue.use() 注册 vue-rx 和 Rxjs。 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 可以使用 RxJS 实现 Observable 接口
// VueRx can use libraries other than RxJS
// that implement the observable interface.
Vue.use(VueRx, Rx)

自动管理订阅

Automatically-Managed Subscriptions

Rx 框架最常用的特性就是，它能够利用Observables，自动管理组件之间: 在创建(created)时订阅(subscribe)，在销毁(destroyed)时取消订阅(unsubscribe)。这就避免了常常出现手动订阅造成的内存泄露。 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.

为了用 vue-rx 做到自动管理订阅，你只需要为组件添加 subscriptions 对象，将数据范围与你的 Observables 一一对应。这相当于 Angular 2 的异步管道(async pipe)。 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.

下面是 MyComponent.vue ： 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>

message$ 变量现在包含 Example Message Final。订阅(subscription)在组件卸载(unmount)时会自动销毁。 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.

你可以通过 this.$observables.message 获取组件内部的 observable 。 The observable can be accessed inside the component through this.$observables.message.

和 Angular 2 社区一样，在 Vue 项目中，observable 订阅的对象常常是以美元符号($)结尾。 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

独一无二的 Observables 对象

Unique Observables

在你想要订阅每个组件示例所产生的不同 observables 时，你可以使用返回一个对象的函数，其中这个对象映射到数据到 observables，而不是设置 subscriptions 属性，就像下面代码所见： 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

尽管你手动订阅了组件内的 Observable，你仍然可以使用 vue-rx 通过 this.$subscribeTo(Observable, callback) 处理取消订阅(unscribing)。 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)
    })
  }
}

whatwewant/Integrating-RxJS-with-Vue.js.md

安装