Angular-landの出身であるか、関数型プログラミングのファンである場合は、RxJSによってJS-landで最も一般的に実装されている、監視可能なストリームの概念にかなり精通しているでしょう。 VueでRxJSを使用するためのクイックガイドは次のとおりです。

インストール

現在、Vueには他のフレームワークのようにすぐに使用できる RxJS サポートは付属していませんが、必要なバインディングを追加する公式プラグインvue-rxを提供しています。 。

使用するには、YarnまたはNPMを介してvue-rxおよびrxjsをインストールします。

# Yarn
$ yarn add vue-rx rxjs

# NPM
$ npm install vue-rx rxjs --save

アプリで、 RxJS をインポートし、 Vue.use()を使用してプラグインをVueに登録することで、プラグインを使用できます。

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)

自動管理されたサブスクリプション

Rxフレームワーク統合で最も一般的に使用される機能は、通常、コンポーネントが作成および破棄されたときに、コンポーネントをObservablesから自動的にサブスクライブおよびサブスクライブ解除する機能です。 これにより、手動でサブスクライブするときに一般的に発生するメモリリークが回避されます。

vue-rx でこれを行うには、パラメーターをObservablesにマップするsubscriptionsオブジェクトをコンポーネントに追加するだけです。 最終結果は、Angular2の非同期パイプに匹敵します。

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が含まれ、テンプレートにレンダリングされます。 コンポーネントがアンマウントされると、サブスクリプションは自動的に破棄されます。

オブザーバブルには、this。$observables.messageを介してコンポーネント内でアクセスできます。

Angular 2コミュニティと同様に、Vueプロジェクトでは、通常、監視可能なサブスクリプションである変数にはドル記号($)の接尾辞が付いていると予想されます。

その他の機能

ユニークなオブザーバブル

コンポーネントのインスタンスごとに異なるオブザーバブルをサブスクライブする場合は、代わりに、 subsets プロパティを、以下に示すように、オブジェクトマッピングデータプロパティをオブザーバブルに返す関数に設定できます。

export default {
  subscriptions() {
    return {
      message$: messageObservable
    }
  }
}

手動サブスクリプション

this。$subscribeTo(Observable、callback)を使用して、 vue-rx にサブスクライブ解除を処理させながら、コンポーネント内のobservableをサブスクライブできます。

export default {
  mounted () {
    this.$subscribeTo(messageObservable, function (val) {
      console.log(val)
    })
  }
}