vue-rx: how to watch value of object from an array is not change anymore?

Question

"vue-rx": "^6.1.0",
"rxjs": "^6.4.0",
"vue": "^2.5.17",

I'm new in vue-rx and rxjs,But when I see several demo of rx, I'm quite interested in this.So I want to use it in my project which posts a request when attribute num will not change anymore

[
  {
    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
  },
  ...
]

And Here is my solution:

using $watchAsObservable to watch the change of sendCalledTimes, and then using mergeMap to post the request.

the variable sendCalledTimes is a number which will sendCalledTimes++ when called send function, And after posting the request, reset this to sendCalledTimes = 0.

So that $watchAsObservable('sendCalledTimes')(vue-rx) will execute every three seconds, and will reduce request times in my project. But i think it's still not good because it just like a timer and can't watch weather num of each object in the Array changes. The good example should be like this search example.

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

Also since vue-rx doesn't have many examples on github, so i need help to solve creating good subscription for this situation.

I have tried this, but failed:

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

It would be greatly appreciated if anyone can help me to solve this question.

Corey · Accepted Answer · 2019-04-02 19:38:32Z

1

It's a little unclear from your question exactly what you're trying to do, but I've created an example based on what I believe to be your intent.

I made some assumptions:

You have a 'gifts' array that represents all of the gifts that will ever exist.
You want to make updates to that array.
Every time you make an update to the array, you want to see the update in the form of an Observable emitting an event.

Use a Subject

I think what you want is a Subject.

const gift$ = new Subject();

Make it Emit on Updates

And you would set it up to emit every time you increment num or add a new gift.

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

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

All together it could look something like this:

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

edited Apr 2, 2019 at 19:38

answered Apr 2, 2019 at 19:33

Corey

5503 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Y.X Over a year ago

I have updated my question, sorry for not explaining clearly. All i want to do is to watch the change of each gift num is not change anymore so i can post them to axios in one time, but all i have is one variable sendCalledTimes that will be the same number another time, so i cannot use distinctUntilChanged in my code.Thanks very much and still looking for some help and advice.

Corey Over a year ago

Thanks for updating the question. I would recommend reviewing SO's recommended way to ask a question. There is a lot of information here, and it's still a little hard to parse out your actual question. Even with your updates, I would probably still answer the question the same way. stackoverflow.com/help/how-to-ask

Collectives™ on Stack Overflow

vue-rx: how to watch value of object from an array is not change anymore?

1 Answer 1

Use a Subject

Make it Emit on Updates

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Use a Subject

Make it Emit on Updates

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related