使用主题

Question

querySelectorAll()

我是"vue-rx": "^6.1.0", "rxjs": "^6.4.0", "vue": "^2.5.17",和vue-rx的新手，但是当我看到rxjs的几个演示时，我对此很感兴趣。因此我想在项目中使用它当属性rx不再更改时发布请求的页面

num

这是我的解决方案：

使用[ { id: 0, name: 'giftA', num: 0 // will turn to 1,2,3,4,5,...after running `send({id: 0})` function 1,2,3,4,5,...times }, { id: 1, name: 'giftB', num: 0 }, ... ]查看$watchAsObservable的更改，然后使用sendCalledTimes发布请求。

变量mergeMap是一个sendCalledTimes，当调用number函数时，它将sendCalledTimes++，并且在发布请求后，将其重置为send。

这样sendCalledTimes = 0（vue-rx）将每三秒钟执行一次，并减少我项目中的请求时间。但是我认为它仍然不好，因为它就像计时器一样，无法监视Array中每个对象的天气$watchAsObservable('sendCalledTimes')变化。很好的例子应该像这样search example。

num

此外，由于data() { return { sendCalledTimes: 0, giftArr: [] } }, created() { this.$watchAsObservable('sendCalledTimes').pipe( pluck('newValue'), filter(val => val > 0), debounceTime(3000), // if `sendCalledTimes` is the same number as previous // will not execute follows // distinctUntilChanged(), mergeMap( (val) => this.requestSendGift() ), ).subscribe( (val) => { } ) }, methods: { send (obj) { let pushFlag = true for (const gift in this.giftArr) { if (gift.id === obj.id) { gift.num++ pushFlag = false break } } if (pushFlag) { this.giftArr.push(obj) } // observable this.sendCalledTimes++ }, async requestSendGift () { for (const gift in this.giftArr) { // example for post a request to store each gift await axios({ data: gift, type: 'post', url: '...' }).then(res => { ... }) } // reset `this.sendCalledTimes` this.sendCalledTimes = 0 } }在github上没有太多示例，因此我需要帮助来解决为这种情况创建良好的订阅的情况。

我已经尝试过，但是失败了：

vue-rx

如果有人能帮助我解决这个问题，将不胜感激。

Answer 1

从您的问题中不清楚您到底想做什么，但我根据我的意图创建了一个示例。

我做了一些假设：

您有一个'gifts'数组，代表了将永远存在的所有礼物。
您要对该阵列进行更新。
每次对数组进行更新时，您都希望以发出事件的Observable形式查看 update 。

使用主题

我认为您想要的是Subject。

const gift$ = new Subject();

使其在更新时发出

您将其设置为在每次增加num或添加新礼物时发出。

function addGift(gift) {
  gifts.push(gift);
  gift$.next(gift);
}

function incrementGift(gift) {
  gift.num++;
  gift$.next(gift);
}

它们看起来可能像这样：

import { Subject } from 'rxjs';

const gift$ = new Subject();
const gifts = [{ id: 0, name: 'giftA', num: 0 }, { id: 1, name: 'giftB', num: 0 }];

function addGift(gift) {
  gifts.push(gift);
  gift$.next(gift);
}

function incrementGift(gift) {
  gift.num++;
  gift$.next(gift);
}

function sendGift(newGift) {
  const currentGift = gifts.find(g => g.id === newGift.id);
  currentGift ? incrementGift(currentGift) : addGift(newGift);
}

gift$.subscribe(update => {
  console.log(gifts);
  console.log(update);
});

// You should see an initial logging of 'gifts' and update will be 'undefined' at first. Then you'll see a log for every 'sendGift'.

sendGift({ id: 0 });
sendGift({ id: 3, name: 'giftC', num: 0 });

StackBlitz

vue-rx：如何从数组监视对象的值不再更改？

1 个答案:

使用主题

使其在更新时发出