一、各文档介绍

1、rxjs官网

2、vue-rxjs地址

二、环境搭建

1、使用vue-cli构建一个项目

2、安装vue-rx的依赖包

yarn add rxjs
yarn add rxjs-compat
yarn add vue-rx

3、在src/main.js中配置使用rxjs

// 使用vueRx
import VueRx from 'vue-rx';
import Rx from 'rxjs/Rx'

Vue.use(VueRx, Rx);

三、没有使用vue-rx的时候

1、关于属性的使用

import { Observable } from 'rxjs';
export default {
 data() {
 return {
 name: new Observable.of('张三')
 }
 }
};

2、关于事件的使用

import { Observable } from 'rxjs';
export default {
 data() {
 return {
 name: new Observable.of('张三'),
 }
 },
 mounted () {
 new Observable.fromEvent(this.$refs.btn, 'click').subscribe(e => {
 this.name = '哈哈';
 })
 }
};

四、结合vue-rx的使用

1、项目中集成了vue-rx的时候会在vue中新增一个钩子函数subscriptions,和之前的data类似的使用

2、domStreams是一个数组用来存放事件

3、属性的使用

export default {
 name: 'HelloWorld',
 data () {
 return {
 msg: 'Welcome to Your Vue.js App'
 }
 },
 domStreams: ['setName$', 'resetMsg$'],
 subscriptions() {
 return {
 // 发送一个普通的值
 name: new Observable.of('张三'),
 // 发送一个修改的值
 age$ : Observable.of(20).map(item => item + 10),
 // 定义发送一个数组
 arr$: new Observable.of(['第一本书', '第二本书']),
 // 发送一个数组
 obj$: new Observable.of({ 
 a: 'test-obj',
 name: '呵呵' 
 }),
 // 发送一个promise函数
 promise$: new Observable.fromPromise(this.getPromise()),
 // 定时器
 interval$: new Observable.interval(1000)
 }
 },
 methods: {
 getPromise() {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve('promise');
 }, 1000)
 })
 }
 },
}

5、事件的使用

1.在视图中定义事件

<button v-stream:click="setName$">点击按钮设置值</button>

2.在domStreams中定义

domStreams: ['setName$'],

3、在subscriptions定义事件赋值给哪个变量

name$: this.setName$.map(e => 'hello'.toUpperCase()),

六、关于switchMap、concatMap、exhaustMap的使用

1、定义事件

<button class="btn" v-stream:click="getConcatMapCount$">点击获取concatMapCount$</button>
<p>{{concatMapCount$}}</p>
<button class="btn" v-stream:click="getSwitchMapCount$">点击获取switchMapCount$</button>
<p>{{switchMapCount$}}</p>
<button class="btn" v-stream:click="getExhaustMapCount$">点击获取exhaustMapCount$</button>
<p>{{exhaustMapCount$}}</p>

2、定义事件名

domStreams: ['getConcatMapCount$', 'getSwitchMapCount$', 'getExhaustMapCount$'],

3、触发事件

import { Observable } from 'rxjs';
export default {
 data() {
 return {
 count: 0,
 }
 },
 domStreams: ['getConcatMapCount$', 'getSwitchMapCount$', 'getExhaustMapCount$'],
 subscriptions() {
 return {
 // 当你连续点击按钮多次获取数据时，cancatMap会将获取到的数据按队列发出
 concatMapCount$: this.getConcatMapCount$.concatMap(e => {
 return new Observable.from(this.getCount());
 }),
 // 当你连续点击按钮多次获取数据时，switchMap只会将最后一个点击发出的值发出，前面发出的值会被吞掉
 switchMapCount$: this.getSwitchMapCount$.switchMap(e => {
 return new Observable.from(this.getCount());
 }),
 // 当你连续点击按钮多次时，exhaustMap仅执行一次，在第一次值发出后，才可以继续点击下一次发出值
 exhaustMapCount$: this.getExhaustMapCount$.exhaustMap(e => {
 return new Observable.from(this.getCount())
 })
 }
 },
 methods: {
 getCount() {
 return new Promise((resolve, reject) => {
 this.count ++;
 setTimeout(() => {
 resolve(this.count);
 }, 1000);
 })
 }
 }
};

七、事件中传递参数

1、html页面

<ul>
 <li v-for="(num, index) in numList" :key="index" v-stream:click="{
 subject: getNum$,
 data: {
 'index': index,
 'num': num
 }
 }">{{ num }}</li>
</ul>
<p>点击的数字为：{{ num$.index }}</p>
<p>点击的数字下标为：{{ num$.num }}</p>

2、在vue中处理

import { Observable } from 'rxjs'
export default {
 data () {
 return {
 numList: [1, 2, 3]
 }
 },
 // v-stream事件可以统一写在这里，具体可以看vue-rx的使用
 domStreams: [
 'getNum$'
 ],
 subscriptions () {
 return {
 num$: this.getNum$
 // 从传入的对象中获取key为data的value,传入下一个operator
 .pluck('data')
 .map(data => data)
 // 因为视图引用了num$.index，所以这里要初始化num$为对象，避免报错
 .startWith({})
 }
 }
}

3、输入框中获取值

<input type="text" v-stream:keyup="getInput$">
<p>value$: {{ value$ }}</p>

import { Observable } from 'rxjs';
export default {
 domStreams: ['getInput$'],
 subscriptions () {
 return {
 value$: this.getInput$
 // 选取e.event.target.value
 .pluck('event', 'target', 'value')
 .debounceTime(2000)
 // 根据value值作比较，如果和上一次一样则不发出值
 .distinctUntilChanged()
 .map(val => {
 console.log(val);
 return val;
 })
 }
 }
}