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

Question

[Danbka]

Привет!

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

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

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

Как сделал я:

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

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

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

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

Как решить эту проблему? Использовать vuex? Но если так, то получается, что в vuex надо хранить любые данные, которые являются "справочниками" - города, метро, статусы разных сущностей и т.п. Это правильно?

Comments

[alex]

Возвращаемся на страницу "Метро" и тут в списке городов нового города нет

почему при возвращаении, компонент metroStationsList не запрашивает эти данные заного? ведь у вас, как вы сказали: В created() вызываются оба этих метода. ©.

а вообще нужно юзать vuex. ну или как минимум если приложение небольшое, то можно держат данные в родительском компненте

[Danbka]

created() вызывался только 1 раз. Оказывается, нужно было добавить noCache: true в настройки маршрута.

Answer 1

[Evgeny Kulakov]

Да, vuex будет вполне уместен, для вас он будет источником истины, откуда все компоненты будут забирать данные. Сделайте два vuex модуля - cities и stations - в них реализуйте соответствующие crud операции. Компоненты будут из них забирать/передавать необходимые данные.

Comments

[Danbka]

Я только начал разбираться с Vuex.
У меня есть понимание того, что в компонентах типа "списка станций метро" или "районы города" список городов будет браться из vuex.
Но в какой момент я должен буду получить список городов с сервера? Один раз в момент старта приложения?

[Evgeny Kulakov]

Danbka, да, логично забрать данные при старте. После взаимодействия с сервером, например, после добавления сущности, добавляете ее также в хранилище или целиком забираете весь массив сущностей.

Answer 2

[cnstntn-kndrtv]

Перейти на сокеты? Сделать плагин для Vuex. Можно и без сокетов, если у вас есть есть другой механизм подписки на изменения. На сокетах+Vuex это выглядит примерно так:

socket.on("update_something", data => store.commit("something/update", data));