Question

你好吗？我是Rxjs的新手。我不确定如何合并来自不同事件的observable。我将Rxjs与Vue.js集成在一起

export default {
  name: 'useraside',
  data: function () {
    return {
      searchKey: '',
      isPublic: true
    }
  },
  components: {
    User
  },
  subscriptions () {
    return {
      // this is the example in RxJS's readme.
      raps: this.$watchAsObservable('searchKey')
        .pluck('newValue')
        // .filter(text => text.length > 1)
        .debounceTime(500)
        .distinctUntilChanged()
        .switchMap(terms => fetchRaps(terms, this.userdata._id, this.isPublic))
        .map(formatResult)
    }
  }
}

现在事件来自searchKey更改，现在我想在isPublic值更改时订阅相同的observable。因此，每当searchKey发生变化或者公共更改时，我都希望获得raps。感谢。

Answer 1

您可以使用merge运算符并继续使用this.isPublic中的switchMap，如评论中建议的Maxime。

但我宁愿选择一个很好的纯数据流来监听这两个值并在处理程序中使用它们。像

这样的东西

Rx.Observable.combineLatest(
  this.$watchAsObservable('searchKey').pluck('newValue'),
  this.$watchAsObservable('isPublic').pluch('newValue'),
  ([searchKey, isPublic]) => ({ searchKey, isPublic })
)
.dedounceTime(500)
.distinctUntilChanged()
.switchMap(({ searchTerm, isPublic }) => fetchRaps(searchTerm, this.userdata._id, isPublic))

或者事件更好的是您可以将初始数据结构更改为：

data: function () {
    return {
      searchConfig: {
        searchKey: '',
        isPublic: true
      }
    }
  },

然后，您可以删除combineLatest并仅查看searchConfig属性。

此实现的好处是您的数据流是纯粹的，不依赖于任何外部上下文（不需要this.isPublic）。每个依赖项都在数据流的开头显式声明。

如果您想更进一步，您还可以观看userdata并明确地将其传递给数据流：）

如何在Rxjs中从多个事件中观察？

1 个答案: