原创文章,转载请注明出处

使用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 &amp; 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>

案例下载

vue_rx文档

rxjs与vue的更多相关文章

  1. [Vue-rx] Cache Remote Data Requests with RxJS and Vue.js

    A Promise invokes a function which stores a value that will be passed to a callback. So when you wra ...

  2. [Vue-rx] Disable Buttons While Data is Loading with RxJS and Vue.js

    Streams give you the power to handle a "pending" state where you've made a request for dat ...

  3. angular与vue的应用对比

    因为各种笔试面试,最近都没时间做一些值得分享的东西,正好复习一下vue技术栈,与angular做一下对比. angular1就跟vue比略low了. 1.数据绑定 ng1 ng-bind,{{ sco ...

  4. 企业项目实战 .Net Core + Vue/Angular 分库分表日志系统一 | 前言

    教程预览 01 | 前言 02 | 简单的分库分表设计 03 | 控制反转搭配简单业务 04 | 强化设计方案 05 | 完善业务自动创建数据库 06 | 最终篇-通过AOP自动连接数据库-完成日志业 ...

  5. ReactiveX 学习笔记(27)使用 RxJS + Vue.js 进行 GUI 编程

    课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...

  6. ReactiveX 学习笔记(25)使用 RxJS + Vue.js 调用 REST API

    JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...

  7. [Vue-rx] Watch Vue.js v-models as Observable with $watchAsObservable and RxJS

    You most likely already have data or properties in your template which are controlled by third-party ...

  8. [Vue-rx] Handle Image Loading Errors in Vue.js with RxJS and domStreams

    When an image fails to load, it triggers an error event. You can capture the error event and merge i ...

  9. [Vue-rx] Stream an API using RxJS into a Vue.js Template

    You can map remote data directly into your Vue.js templates using RxJS. This lesson uses axios (and ...

随机推荐

  1. SAS学习笔记7 合并语句(set、merge函数)

    set函数:纵向合并数据集 set语句进行纵向合并.set语句的作用是将若干个数据集依次纵向连接,并存放到data语句建立的数据集中.若set后面只有一个数据集,此时相当于复制的作用 注:data语句 ...

  2. const函数返回自身的引用也是常量引用

    const函数返回自身的引用也是const 解决:根据对象是否为consr重载

  3. 深度挖坑:从数据角度看人脸识别中Feature Normalization,Weight Normalization以及Triplet的作用

    深度挖坑:从数据角度看人脸识别中Feature Normalization,Weight Normalization以及Triplet的作用 周翼南 北京大学 工学硕士 373 人赞同了该文章 基于深 ...

  4. ...:ES6中扩展运算符(spread)和剩余运算符(rest)详解

    1.扩展运算符(spread) demo1:传递数据代替多个字符串的形式 let test= function(a,b,c){ console.log(a); console.log(b); cons ...

  5. (九)mybatis之延迟加载

    一.为什么要使用延迟加载? 使用延迟加载的意义 在进行数据查询时,为了提高数据库查询性能,尽量使用单表查询,因为单表查询比多表关联查询速度快. 如果查询单表就可以满足需求,一开始先查询单表,当需要关联 ...

  6. CCF 201803-1 跳一跳

    题目: 问题描述 近来,跳一跳这款小游戏风靡全国,受到不少玩家的喜爱. 简化后的跳一跳规则如下:玩家每次从当前方块跳到下一个方块,如果没有跳到下一个方块上则游戏结束. 如果跳到了方块上,但没有跳到方块 ...

  7. C#如何调用C++(进阶篇)

    上一篇文章最后,提出的一个问题:如果一个c++库中有很多方法,需要一个个声明??这样岂不是要写很多代码??,而且没有智能提示看到提供了那些方法. 如下图: 如果有朋友需要用这种方式调用,而又不知道怎么 ...

  8. 分析js跳出循环的几种方法

    Break语句: break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句. 由于它是用来退出循环或者switch语句的, 所以只有当它出现在这些语句的时候, 这种形式的br ...

  9. Plugin 免费CSS生成器CssCollector

    下载: 百度云 自己在做Web开发的时候,页面里会有很多样式类,一个个复制到样式表里总感觉很麻烦 网上也没有找到合适的工具,可以一键生成样式表 所以,干脆自己做一个咯~ 案例展示 花了一天时间,CSS ...

  10. vue购物车动画效果

    使用动画的三个函数 v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter=&q ...