# vue-rx
###### tags: `Vue` `vue-rx` `Rxjs`

## 安裝

RxJS 6 必須要搭配rxjs-compat來使用

npm install --save vue-rx rxjs rxjs-compat  

## 配置
在main.js

import VueRx from 'vue-rx'
import Rx from 'rxjs/Rx'

Vue.use(VueRx, Rx)

在.vue

<script>
import { 
	Observable, Subject, asapScheduler, pipe, of, from, interval, merge, range, timer, empty,
	never, throwError, fromEvent, fromEventPattern, SubscriptionLike, PartialObserver, 
	defer, forkJoin, ReplaySubject, AsyncSubject, asyncScheduler
} from 'rxjs';


import { map, mapTo, filter, scan, every, take, takeLast, takeUntil, takeWhile, tap, delay, delayWhen,
    skip, skipLast, skipUntil, skipWhile, concat, concatAll, concatMap, concatMapTo, toArray,
    merge, mergeAll, mergeMap, mergeMapTo, mergeScan, combineAll, combineLatest, race, reduce,
    zip, zipAll, switchAll, switchMap, switchMapTo, withLatestFrom, buffer, bufferCount, refCount,
    bufferTime, bufferToggle, bufferWhen, debounce, debounceTime, throttle, throttleTime, throwIfEmpty,
    timeInterval, timeout, timeoutWith, timestamp, distinct, distinctUntilChanged, distinctUntilKeyChanged,
    retry, retryWhen, repeat, repeatWhen, finalize, find, findIndex, flatMap, pluck, pairwise, partition,
    publish, publishBehavior, publishLast, publishReplay, materialize, max, min, multicast,
    sample, sampleTime, sequenceEqual, share, shareReplay, single, subscribeOn
} from 'rxjs/operators';

</script>

## 使用
v-stream 對應 domStreams

<template>
  <button class="btn" v-stream:click="getData$">点击获取数据</button>
</template>

<script>
export default {
  ...

  // v-stream事件可以统一写在这里，具体可以看vue-rx的使用
  domStreams: [
    'getData$'
  ],
  subscriptions () {
    return {
      data$: this.getData$
        // map操作符主要用于映射数据，这里我们直接返回了一个字符串
        .map(e => {
          return '成功获取data'
        })
    }
  }
}
</script>