Как обновлять данные axios после изменения?

Question

[Intelix]

Здравствуйте!
Есть дашборд в котором я с помощью axios получаю два массива activeTasks и readyTasks
Есть компонент tasksTable который я вызываю два раза в дашборде и соответственно передаю ему разные массивы с помощью props.
В этом компоненте есть возможность переместить задачу из activeTasks в readyTasks и наоборот, так же с помощью запросов axios.
Вопрос в том, как сделать так чтобы пользователь это видел, без обновления страницы. Те как мне забрать обновленные данные с сервера без перезагрузки страницы.

Думал над тем чтобы сделать дополнительные массив в компоненте и чисто для клиента в нем добавлять и удалять элементы, удаление можно сделать по индексу, но добавление никак, ведь компонент один, а данные разные.

Посоветуйте варианты пожалуйста.

Answer 1

[Сергей Соколов]

Таски "active" и "ready", вероятно, ничем не отличаются по структуре. Поэтому можно их отдавать с бэка единой кучкой. Добавить каждому флаг isDone (true / false).

Раскидать их по панелям дашборда можно уже на фронте.

При изменений флага на фронте, таск мгновенно-реактивно пропадёт из одной и попадёт в другую панельку. Остаётся уведомить бэк о новостях – отправить запрос, ответ на который в данном случае даже можно игнорировать.

Как реализовать это во Vue — решать вам. Можно прикрутить Vuex и разобраться с глобальным стейтом и мутациями. Можно просто держать массив всех тасков в общем корневом компоненте, в нём же фильтровать активные / готовые и раздавать в дочерние через пропсы. Как из дочерних менять состояние родителей — распространённый вопрос и есть несколько решений. Удачных поисков!

Если же состояние тасков меняется откуда-то ещё на бэке, т.е. инициатива изменений не в вашем фронте, а на бэке — придётся либо прикручивать сокеты, либо раз в секунду справшивать бэк «есть ли новости?», но это очень плохое решение. Лучше сокеты.

Answer 2

[Дмитрий Кузнецов]

Думаю вам нужны сокеты

Comments

[Intelix]

как я понял сокеты нужны для непрерывного обновления данных, но тут данные меняются редко, только при вызове функции. Все равно советуете сокеты?

[Дмитрий Кузнецов]

Intelix,

как я понял сокеты нужны для непрерывного обновления данных

Не совсем верное утверждение. Их можно использовать и если данные не часто обновляются.

Это всё же лучше чем каждые n-секунд опрашивать back через http запросы.