如何正确的使用vue-rx指令

　　介绍

今天就跟大家聊聊有关如何正确的使用vue-rx指令,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

<强>一、各文档介绍

1, rxjs官网

2, vue-rxjs地址

<强>二、环境搭建

1,使用vue-cli构建一个项目

2,安装vue-rx的依赖包

yarn  add  rxjs 　　yarn  add  rxjs-compat 　　yarn  add  vue-rx

3,在src/主要。js中配置使用rxjs

//,使用vueRx 　　import  VueRx 得到& # 39;vue-rx& # 39;; 　　import  Rx 得到& # 39;rxjs/rx # 39; 　　 　　Vue.use (VueRx, Rx);

<强>三,没有使用vue-rx的时候

1,关于属性的使用

import  {, Observable },得到& # 39;rxjs& # 39;; 　　export  default  { 　　,数据(){ 　　return {才能 　　,,,的名字:new  Observable.of(& # 39;张三& # 39;) 　　,,} 　　,} 　　};

2,关于事件的使用

import  {, Observable },得到& # 39;rxjs& # 39;; 　　export  default  { 　　,数据(){ 　　return {才能 　　,,,的名字:new  Observable.of(& # 39;张三& # 39;), 　　,,} 　　}, 　　,mounted  (), { 　　new 才能;Observable.fromEvent(这一点。refs.btn美元,& # 39;点击# 39;).subscribe (e =祝辞,{ 　　,,this.name =, & # 39;哈哈& # 39;; 　　})才能 　　,} 　　};

<强>四,结合vue-rx的使用

1项目中集成了vue-rx的时候会在vue中新增一个钩子函数订阅,和之前的数据类似的使用

2, domStreams是一个数组用来存放事件

3,属性的使用

export  default  { 　　,名字:& # 39;helloworld # 39; 　　,data  (), { 　　return {才能 　　,,,味精:& # 39;Welcome 用Your  Vue.js 应用# 39; 　　,,} 　　}, 　　,domStreams: [& # 39; setName $ & # 39;,, & # 39; resetMsg $ & # 39;], 　　,订阅(){ 　　return {才能//,,,发送一个普通的值 　　,,,的名字:new  Observable.of(& # 39;张三& # 39;),//,,,发送一个修改的值 　　,,年龄,美元:,Observable.of (20) . map (item =祝辞,item  +, 10), 　　,,//,定义发送一个数组 　　,,加勒比海盗:美元,new  Observable.of((& # 39;第一本书& # 39;,,& # 39;第二本书& # 39;]),//,,,发送一个数组 　　,,obj:美元,new  Observable.of ({, 　　,,,,,& # 39;test-obj& # 39; 　　,,,的名字:,& # 39;呵呵& # 39;, 　　,,}),//,,,发送一个保证函数 　　,才能保证:美元,new  Observable.fromPromise (this.getPromise ()), 　　,,//,定时器 　　,,时间间隔:美元,new  Observable.interval (1000) 　　,,} 　　}, 　　,方法:{ 　　getPromise才能(),{ 　　,,return  new 承诺((解决,,拒绝),=祝辞,{ 　　,,,setTimeout((),=祝辞,{ 　　,,,,解决(& # 39;承诺# 39;); 　　,,,},,1000) 　　,,}) 　　,,} 　　}, 　　}

5,事件的使用

1。在视图中定义事件

& lt; button  v-stream:点击=皊etName美元“祝辞点击按钮设置值& lt;/button>

2。在domStreams中定义

domStreams:, (& # 39; setName $ & # 39;],

3,在订阅定义事件赋值给哪个变量

名称:美元,美元this.setName . map (e =祝辞,& # 39;你好# 39;.toUpperCase ()),

<强>六、关于switchMap, concatMap, exhaustMap的使用

1,定义事件

& lt; button 类=癰tn", v-stream:点击=癵etConcatMapCount美元“祝辞点击获取concatMapCount & lt;美元/button> 　　& lt; p> {{concatMapCount $}} & lt;/p> 　　& lt; button 类=癰tn", v-stream:点击=癵etSwitchMapCount美元“祝辞点击获取switchMapCount & lt;美元/button> 　　& lt; p> {{switchMapCount $}} & lt;/p> 　　& lt; button 类=癰tn", v-stream:点击=癵etExhaustMapCount美元“祝辞点击获取exhaustMapCount & lt;美元/button> 　　& lt; p> {{exhaustMapCount $}} & lt;/p>

2,定义事件名

domStreams:, (& # 39; getConcatMapCount $ & # 39;,, & # 39; getSwitchMapCount $ & # 39;,, & # 39; getExhaustMapCount $ & # 39;],

3,触发事件

import  {, Observable },得到& # 39;rxjs& # 39;; 　　export  default  { 　　,数据(){ 　　return {才能 　　,,,数:0, 　　,,} 　　}, 　　,domStreams: [& # 39; getConcatMapCount $ & # 39;,, & # 39; getSwitchMapCount $ & # 39;,, & # 39; getExhaustMapCount $ & # 39;], 　　,订阅(){ 　　return {才能//,,,当你连续点击按钮多次获取数据时,cancatMap会将获取到的数据按队列发出 　　,,concatMapCount:美元,this.getConcatMapCount .concatMap美元(e =祝辞,{ 　　,,,return  new  Observable.from (this.getCount ()); 　　,,}),//,,,当你连续点击按钮多次获取数据时,switchMap只会将最后一个点击发出的值发出,前面发出的值会被吞掉 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

如何正确的使用vue-rx指令