vue-rx的使用

ZadarrienChina 2019-06-28

一、各文档介绍

二、环境搭建

  • 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()),

六、关于switchMapconcatMapexhaustMap的使用

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

七、使用$watchAsObservable代替vue中的watch

相关推荐