一、各文件介紹

• 1、rxjs官網
• 2、vue-rxjs地址

二、環境搭建

• 1、使用vue-cli構建一個專案

• 2、安裝vue-rx的依賴包

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

// 使用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('張三')
    }
  }
};

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

domStreams: ['setName$'],

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> ```

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

七、事件中傳遞引數

• 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> ```

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

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

來源：https://segmentfault.com/a/1190000016478626