@Danbka

Как получать актуальные данные с сервера в одном компоненте, если они меняются в другом?

Привет!

Хочу реализовать очень простую вещь:

CRUD для управления списком городом (id, name)
CRUD для управления списком станций метро (id, name, city_id)

При этом добавление и изменение элементов происходит в компоненте списка во всплывающем окне.

Как сделал я:

Во vue-компоненте citiesList реализованы методы:
getCities() - получает список городов с сервера
addCity() и updateCity() - добавление и изменение соответственно.

С этим компонентом проблем на данный момент нет.

Vue-компонент metroStationsList:
В этом компоненте помимо прочего есть методы
getStations() - для получения списка станций с сервера.
getCities() - для получения всех городов. Они тут нужны для того, чтобы в форме добавления/изменения вывести select со списком городов.
В created() вызываются оба этих метода.

Проблема:
Переходим на страницу "Метро". С сервера получили список городов, который отображается в формах добавления/изменения.
Далее переходим на страницу "Города", добавляем город.
Возвращаемся на страницу "Метро" и тут в списке городов нового города нет (потому что список городов подтянулся с сервера при первом заходе и о новом городе этот компонент ничего не знает).

Как решить эту проблему? Использовать vuex? Но если так, то получается, что в vuex надо хранить любые данные, которые являются "справочниками" - города, метро, статусы разных сущностей и т.п. Это правильно?
  • Вопрос задан
  • 201 просмотр
Решения вопроса 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Да, vuex будет вполне уместен, для вас он будет источником истины, откуда все компоненты будут забирать данные. Сделайте два vuex модуля - cities и stations - в них реализуйте соответствующие crud операции. Компоненты будут из них забирать/передавать необходимые данные.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@cnstntn-kndrtv
Перейти на сокеты? Сделать плагин для Vuex. Можно и без сокетов, если у вас есть есть другой механизм подписки на изменения. На сокетах+Vuex это выглядит примерно так:
socket.on("update_something", data => store.commit("something/update", data));
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы