一、各文档介绍
- 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、定义事件名
扫描二维码关注公众号，回复：
4581889 查看本文章
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、
```<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> ```html页面
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;
})
}
}
}