rxjs与vue
原创文章，转载请注明出处
使用vue-rx插件将vue和rxjs联系起来
在main.js中将vue-rx注入vue中
import Vue from 'vue'
import App from './App'
import router from './router'
import VueRx from 'vue-rx'
// Vue.config.productionTip = false
Vue.use(VueRx)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
例子一
使用 observableMethods 选项声明observable,也可以使用this.$createObservableMethod('muchMore')创建
调用注册的observable方法muchMore(500)，相当于nextx(500)
merge是将多个observable合并起来，统一监听处理
scan是累计处理
<template>
<div>
<div>{{ count }}</div>
<button v-on:click="muchMore(500)">Add 500</button>
<button v-on:click="minus(minusDelta1)">Minus on Click</button>
<pre>{{ $data }}</pre>
</div>
</template>
<script>
import { merge } from 'rxjs'
import { startWith, scan } from 'rxjs/operators'
// 使用 observableMethods 选项声明observable,也可以使用this.$createObservableMethod('muchMore')创建
// 调用注册的observable方法muchMore(500)，相当于nextx(500)
// merge是将多个observable合并起来，统一监听处理
// scan是累计处理
export default {
name: 'HelloWorld',
data() {
return {
minusDelta1: -1,
minusDelta2: -1
}
},
observableMethods: {
muchMore: 'muchMore$',
minus: 'minus$'
}, // equivalent of above: ['muchMore','minus']
subscriptions() {
return {
count: merge(this.muchMore$, this.minus$).pipe(
startWith(0),
scan((total, change) => total + change)
)
}
}
}
</script>
例子二
vue-rx 提供 v-stream让你向一个 Rx Subject 流式发送 DOM 事件
渲染发生之前你需要在vm实例上提前注册数据，比如plus\(
传递额外参数<button v-stream:click="{ subject: plus\), data: someData }">+ 传递参数
<template>
<div>
<div>{{ count }}</div>
<button v-stream:click="plus$">+</button>
<button v-stream:click="minus$">-</button>
</div>
</template>
<script>
import { merge } from 'rxjs'
import { map,startWith, scan } from 'rxjs/operators'
export default {
domStreams: ['plus$', 'minus$'],
subscriptions() {
return {
count: merge(
this.plus$.pipe(map(() => 1)),
this.minus$.pipe(map(() => -1))
).pipe(
startWith(0),
scan((total, change) => total + change)
)
}
}
}
</script>
例子三
组件触发父组件流事件
pluck操作符抽取特定的属性流传下去
<template>
<div>
<div>{{ count }}</div>
<!-- simple usage -->
<button v-stream:click="plus$">Add on Click</button>
<button
v-stream:click="{ subject: plus$, data: minusDelta1, options:{once:true} }"
>Add on Click (Option once:true)</button>
<!-- you can also stream to the same subject with different events/data -->
<button
v-stream:click="{ subject: minus$, data: minusDelta1 }"
v-stream:mousemove="{ subject: minus$, data: minusDelta2 }"
>Minus on Click & Mousemove</button>
<pre>{{ $data }}</pre>
<my-button v-stream:click="plus$"></my-button>
</div>
</template>
<script>
// import { Observable, Subject, ReplaySubject, from, of, range } from 'rxjs';
// import { map, filter, switchMap } from 'rxjs/operators';
import { merge } from 'rxjs'
import { map, pluck, startWith, scan } from 'rxjs/operators'
export default {
data() {
return {
minusDelta1: -1,
minusDelta2: -1
}
},
components: {
myButton: {
template: `<button @click="$emit('click')">MyButton</button>`
}
},
created() {
//Speed up mousemove minus delta after 5s
setTimeout(() => {
this.minusDelta2 = -5
}, 5000)
},
// declare dom stream Subjects
domStreams: ['plus$', 'minus$'],
subscriptions() {
return {
count: merge(
this.plus$.pipe(map(() => 1)),
this.minus$.pipe(pluck('data'))
).pipe(
startWith(0),
scan((total, change) => total + change)
)
}
}
}
</script>
异步请求
from 从一个数组、类数组对象、Promise、迭代器对象或者类 Observable 对象创建一个 Observable
pluck 将每个源值(对象)映射成它指定的嵌套属性。
filter 类似于大家所熟知的 Array.prototype.filter 方法，此操作符从源 Observable 中 接收值，将值传递给 predicate 函数并且只发出返回 true 的这些值
debounceTime 只有在特定的一段时间经过后并且没有发出另一个源值，才从源 Observable 中发出一个值
distinctUntilChanged 返回 Observable，它发出源 Observable 发出的所有与前一项不相同的项
switchMap 将每个源值投射成 Observable，该 Observable 会合并到输出 Observable 中， 并且只使用最新投射的Observable中的获取的值。
<template>
<div>
<input v-model="search">
<div v-if="results">
<ul v-if="results.length">
<li :key="match.title" v-for="match in results">
<p>{{ match.title }}</p>
<p>{{ match.description }}</p>
</li>
</ul>
<p v-else>No matches found.</p>
</div>
</div>
</template>
<script>
import axios from 'axios'
import { from } from 'rxjs'
import {
pluck,
filter,
debounceTime,
distinctUntilChanged,
switchMap,
map
} from 'rxjs/operators'
let a = 1
//模仿异步返回请求数据
//a=1时，代表第一个返回，5秒之后返回
//a=2时，代表第一个返回，2秒之后返回
//(故意制造，先请求的数据后返回的场景)
function fetchTerm(term) {
console.log(term, '--')
let fetchdata = new Promise((resolve, reject) => {
let i = a
console.log('发起请求' + i)
if (i == 1) {
setTimeout(() => {
console.log('获取请求' + i)
resolve([
{
description: 'description1',
title: '第一次的请求' + term + '第' + i + '次'
},
{
description: 'description2',
title: '第一次的请求p' + term + '第' + i + '次'
}
])
}, 5000)
} else {
setTimeout(() => {
console.log('获取请求' + i)
resolve([
{
description: 'description1',
title: '第二次的请求' + term + '第' + i + '次'
},
{
description: 'description2',
title: '第二次的请求p' + term + '第' + i + '次'
}
])
a = 0
}, 2000)
}
})
a = a + 1
console.log('ppp')
return from(fetchdata)
}
function formatResult(res) {
console.log(res)
return res.map(obj => {
return {
title: obj.title + 'ooo',
description: obj.description + 'ppp'
}
})
}
export default {
data() {
return {
search: ''
}
},
subscriptions() {
return {
// this is the example in RxJS's readme.
results: this.$watchAsObservable('search').pipe(
pluck('newValue'),
map(a => {
console.log(a)
return a
}),
filter(text => text.length > 2),
debounceTime(500),
distinctUntilChanged(),
switchMap(fetchTerm), //异步请求，先请求的可能后到。解决这个问题
map(formatResult)
)
}
}
}
</script>
