vue-rx: как смотреть, как значение объекта из массива больше не меняется?

Question

"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.

Так что $watchAsObservable('sendCalledTimes') (vue-rx) будет выполняться каждые три секунды и сократит время запроса в моем проекте. Но я думаю, что это все еще не хорошо, потому что он как таймер и не может смотреть погоду 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
  }
}

Также, поскольку vue-rx не имеет много примеров на github, поэтому мне нужна помощь, чтобы решить, как создать хорошую подписку для этой ситуации.

Я пробовал это, но не получилось:

data () {
    return {
        giftArr: []
    }
},
subscriptions: {
    test: from(this.giftArr) // console.log(this.$observables.test) throw an error: typeError: Cannot read property 'giftArr' of undefined
},

Буду очень признателен, если кто-нибудь поможет мне решить этот вопрос.

Answer 1

Из вашего вопроса немного неясно, что именно вы пытаетесь сделать, но я создал пример, основанный на том, что я считаю вашим намерением.

Я сделал несколько предположений:

• У вас есть массив «даров», представляющий все дары, которые когда-либо будут существовать.
• Вы хотите обновить этот массив.
• Каждый раз, когда вы производите обновление массива, вы хотите видеть обновление в форме наблюдаемой, генерирующей событие.

Использовать тему

Я думаю, что вы хотите Тема .

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