今天就跟大家聊聊有關(guān)如何正確的使用vue-rx指令，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

堅守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都陽光房小微創(chuàng)業(yè)公司專業(yè)提供成都定制網(wǎng)頁設(shè)計營銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺設(shè)計、底層架構(gòu)、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

一、各文檔介紹

1、rxjs官網(wǎng)

2、vue-rxjs地址

二、環(huán)境搭建

1、使用vue-cli構(gòu)建一個項目

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、關(guān)于屬性的使用

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

2、關(guān)于事件的使用

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

四、結(jié)合vue-rx的使用

1、項目中集成了vue-rx的時候會在vue中新增一個鉤子函數(shù)subscriptions,和之前的data類似的使用

2、domStreams是一個數(shù)組用來存放事件

3、屬性的使用

export default {
 name: 'HelloWorld',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 domStreams: ['setName$', 'resetMsg$'],
 subscriptions() {
  return {
   // 發(fā)送一個普通的值
   name: new Observable.of('張三'),
   // 發(fā)送一個修改的值
   age$ : Observable.of(20).map(item => item + 10),
   // 定義發(fā)送一個數(shù)組
   arr$: new Observable.of(['第一本書', '第二本書']),
   // 發(fā)送一個數(shù)組
   obj$: new Observable.of({ 
    a: 'test-obj',
    name: '呵呵' 
   }),
   // 發(fā)送一個promise函數(shù)
   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$">點擊按鈕設(shè)置值</button>

2.在domStreams中定義

domStreams: ['setName$'],

3、在subscriptions定義事件賦值給哪個變量

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

六、關(guān)于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、觸發(fā)事件

import { Observable } from 'rxjs';
export default {
 data() {
  return {
   count: 0,
  }
 },
 domStreams: ['getConcatMapCount$', 'getSwitchMapCount$', 'getExhaustMapCount$'],
 subscriptions() {
  return {
   // 當(dāng)你連續(xù)點擊按鈕多次獲取數(shù)據(jù)時，cancatMap會將獲取到的數(shù)據(jù)按隊列發(fā)出
   concatMapCount$: this.getConcatMapCount$.concatMap(e => {
    return new Observable.from(this.getCount());
   }),
   // 當(dāng)你連續(xù)點擊按鈕多次獲取數(shù)據(jù)時，switchMap只會將最后一個點擊發(fā)出的值發(fā)出，前面發(fā)出的值會被吞掉
   switchMapCount$: this.getSwitchMapCount$.switchMap(e => {
    return new Observable.from(this.getCount());
   }),
   // 當(dāng)你連續(xù)點擊按鈕多次時，exhaustMap僅執(zhí)行一次，在第一次值發(fā)出后，才可以繼續(xù)點擊下一次發(fā)出值
   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);
   })
  }
 }
};

七、事件中傳遞參數(shù)

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>點擊的數(shù)字為：{{ num$.index }}</p>
<p>點擊的數(shù)字下標(biāo)為：{{ num$.num }}</p>

2、在vue中處理

import { Observable } from 'rxjs'
export default {
 data () {
  return {
   numList: [1, 2, 3]
  }
 },
 // v-stream事件可以統(tǒng)一寫在這里，具體可以看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)
    // 根據(jù)value值作比較，如果和上一次一樣則不發(fā)出值
    .distinctUntilChanged()
    .map(val => {
     console.log(val);
     return val;
    })
  }
 }
}

看完上述內(nèi)容，你們對如何正確的使用vue-rx指令有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)站名稱：如何正確的使用vue-rx指令
標(biāo)題URL：http://jinyejixie.com/article14/gpchge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站設(shè)計、Google、品牌網(wǎng)站設(shè)計、云服務(wù)器、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)