vue-rx的初步使用教程

yarn add rxjsyarn add rxjs-compatyarn add vue-rx

// 使用vueRximport VueRx from 'vue-rx';import Rx from 'rxjs/Rx'Vue.use(VueRx, Rx);

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

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

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)   })  } },}

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

domStreams: ['setName$'],

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

<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>

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

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);   })  } }};

<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>

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({})  } }}

<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;    })  } }}