Как указать Vue где и когда перерисовывать компонент?

Question

[VegasChickiChicki]

Начал изучать Vue и по этому мало опыта, что бы не написать костылей фуру, хотел бы попросить помощи, понять логику данной задачи, а задача такова:
Пользователь кликает на кнопку -> идет оправка на сервер запроса -> там выполняется функция и вносит данные в JSON файл -> далее после того как JSON изменился необходимо перерисовать страницу на основе того что изменилось.
У меня 2 главных вопроса, когда должен это делать Vue, ведь сначала данные должны обновиться в JSON'e, а это произойдет только после того как их туда запишет сервер, я полагаю должны быть какие то асинхронные функции, и второй вопрос, это как указать Vue что именно перерисовывать, так как из этого JSON файла берется много разных данных, а нужно будет перерисовать только те что обновились.
P.S. Если можно, то какой нибудь пример кода, спасибо!

Comments

[alex]

Ну так пусть сервер в ответе на запрос вернёт то, что он записал в json.

[VegasChickiChicki]

Alex, Интересная идея, попробую реализовать.

[alex]

VegasChickiChicki, вы посылаете запрос на добавление записи, а дальше два варианта - сервер отвечает вам что все ок и вы после этого запрашиваете повторно обновленный json и заново его рендерите; либо второй вариант - сервер отвечает ок и возвращает в теле ответа добавленную запись и вы ее добавляете в vuex (ну или где вы там храните данные)

Answer 1

[Александр]

Как начинающий могу предположить ... нечто вроде ответа. )))

там выполняется функция и вносит данные в JSON файл

Я представляю все не много не так. Я разделяю передачу данных на сервер и передачу данных с сервера. Если мне надо сохранить данные я формирую запрос к серверу для передачи данных. Контроллер на сервере проверяет данные, которые нет возможности проверить на стороне клиента, если данные проверены то надо данные вернуть и перерисовать. Это 2-а разных "JSON". Это 2-е разные функции. Отправка и получение.

а нужно будет перерисовать только те что обновились.

Не надо мучить сервер пересылая ему массивы. Отслеживайте только 1 (единственное): поле, чекбокс, список... кнопка (как чекбокс). Изменили - сохраняем. Например, У вас товар, каждое нажатие "Галочки" (или кнопки) передает серверу id товара в "корзину". Если сервер вернул ИСТИНУ то надо перерисовать DOM объект "Корзина", увеличив счетчик количества товаров на 1. А вот на странице "Корзина" там только 1 кнопка, например, закрыть и сформировать счет, данные о товаре находящиеся в корзине уже сохранены на сервере, их не надо заново записывать, в теории надо только послать 1 поле (true).
За этим за всем следит nodejs и vue.

Comments

[VegasChickiChicki]

Так я не отсылаю "много" данных ,у меня проходит запрос на сервер ,относительно того какой это запрос ,на серверы выполняется отдельная функция добавляя только нужные данные в JSON. То есть пользователь вписывает имя в инпут ,фокус уходит с инпута и идет запрос на сервер ,что в такой объект ,в такое поле нужно записать данные.