vue-rx的初步使用教程

一、各文档介绍

1、

2、

二、环境搭建

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。