M
M
massef2020-05-13 02:25:49
Express.js
massef, 2020-05-13 02:25:49

How to correctly display Vuex, Vue data?

Need help understanding how to do it right.

There is a server on Express. An external library is connected that takes data from a private API.
Each endpoint has its own route, let's say two of them.

// Тут получаем массив объектов всех валют.
router.get('/getmarketsummaries', async (req, res, next) => {
  try {
    res.json(await client.marketSummaries())
  } catch (error) {
    next(createError(404, error))
  }
})

// Тут получаем массив объектов открытых ордеров.
router.get('/getorderbook', async (req, res, next) => {
  try {
    res.json(await client.orderBook(req.query.market, req.query.type))
  } catch (error) {
    next(createError(400, error))
  }
})


Further, on the client (Vue), I “knock” on these routes, receive data and save it to a state (Vuex), everything is as it should be through mutation actions, etc.
Here I would give examples of the complete code, but there are a lot of them, so I will try to explain it this way.

The only difference is that I make a request to /getmarketsummaries at intervals of every second in order to get up-to-date prices.

In the parent component, I form the cards.
getTickers is a getter that pulls data from the state, it contains all the currencies that are updated every second.
<b-col v-for="(ticker, index) in getTickers" :key="index">
  <Card :ticker="ticker"/>
</b-col>


This is where I got stuck.

There is also the /getorderbook route , which also has a getter and data in the state.
I after all cannot generate cards from two arrays in v-for .
Accordingly, it is necessary to unite the arrays, which I do as a separate method in the adjacent test component.

BUT, since one of the routes is updated every second, and in the other the data is static,
the combined array is also updated every second, which is not good.


I need to generate cards based on open orders and, based on the tickers in each card, add the output of the current price in order to calculate the difference.
Unfortunately, there are no ready-made points in the api.

Several questions arise:
1 - what is the best way to deal with this situation?
2 - is it bad practice to combine such things on the client or is it better to do it on the server and give an already prepared array?
3 - maybe I don’t know something, is it possible to somehow form a card based on data from two arrays?
4 - is it right to shove frequently updated data into a state?
5 - did I do everything wrong? :)

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question