Long polling architecture on Vue/Vuex?

Question

Vue.js

I must say right away that the described case is not quite long polling, but I did not pick up a better term.

The bottom line is that the back uses a message broker for long requests. The front should display the status of these requests.

Suppose this is a blog, each entry has comments, comments can be deleted and comments are deleted for two minutes (THIS IS JUST EXAMPLE):
/blog/article-1
On this page, I decided to delete a comment from a hater. The task fit in the queue, I got the task id:
task_id: 'task-1'

The result of this task comes via the web socket, which distinguishes this approach from long polling.

Now I go to the page with another entry and do the same there. Now I have two tasks.

I return to the previous page (article-1) and here comes the most interesting question:how do i display that the comment i decided to delete is still being deleted?

The idea that came to mind so far. Store everything in vuex (obviously) as a data structure like this:

{
    'article-1': {
        comments: {
            'comment-54': {
                deleting: {
                    task-555: {
                        status: 'running',
                        response: null
                    }
                }
            }
        }
    }
}

Looks redundant and potentially very buggy and dangerous.

Probably, the situation is trivial and there is a solution for this, I would like to know, because. have not come across this before.

Answer 1

Tasks - in vuex, in a separate array. In addition to the task id, write what it is for.
For example:
[{id: 555, entityType: 'comment', entityId: 54, taskType: 'deleting', taskParameters: {...}}, ...]
The tree structure is generally strange. And so - this is a variant of the classic asynchronous RPC.