vue-rx的使用

時間 2019-11-08

標籤 vue 使用简体版

原文原文鏈接

1、各文檔介紹

一、rxjs官網
二、vue-rxjs地址

2、環境搭建

一、使用vue-cli構建一個項目

二、安裝vue-rx的依賴包html

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

三、在src/main.js中配置使用rxjsvue

// 使用vueRx
import VueRx from 'vue-rx';
import Rx from 'rxjs/Rx'

Vue.use(VueRx, Rx);

3、沒有使用`vue-rx`的時候

一、關於屬性的使用git

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

二、關於事件的使用github

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

4、結合`vue-rx`的使用

一、項目中集成了vue-rx的時候會在vue中新增一個鉤子函數subscriptions,和以前的data相似的使用
二、domStreams是一個數組用來存放事件

三、屬性的使用vue-cli

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

五、事件的使用數組
- 1.在視圖中定義事件promise
```
<button v-stream:click="setName$">點擊按鈕設置值</button>
```
- 2.在domStreams中定義dom
```
domStreams: ['setName$'],
```
- 三、在subscriptions定義事件賦值給哪一個變量函數
```
name$: this.setName$.map(e => 'hello'.toUpperCase()),
```

6、關於`switchMap`、`concatMap`、`exhaustMap`的使用

一、定義事件this

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

7、事件中傳遞參數

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

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

三、輸入框中獲取值

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