Как получать актуальные данные с сервера в одном компоненте, если они меняются в другом?
Привет!
Хочу реализовать очень простую вещь:
CRUD для управления списком городом (id, name)
CRUD для управления списком станций метро (id, name, city_id)
При этом добавление и изменение элементов происходит в компоненте списка во всплывающем окне.
Как сделал я:
Во vue-компоненте citiesList реализованы методы:
getCities() - получает список городов с сервера
addCity() и updateCity() - добавление и изменение соответственно.
С этим компонентом проблем на данный момент нет.
Vue-компонент metroStationsList:
В этом компоненте помимо прочего есть методы
getStations() - для получения списка станций с сервера.
getCities() - для получения всех городов. Они тут нужны для того, чтобы в форме добавления/изменения вывести select со списком городов.
В created() вызываются оба этих метода.
Проблема:
Переходим на страницу "Метро". С сервера получили список городов, который отображается в формах добавления/изменения.
Далее переходим на страницу "Города", добавляем город.
Возвращаемся на страницу "Метро" и тут в списке городов нового города нет (потому что список городов подтянулся с сервера при первом заходе и о новом городе этот компонент ничего не знает).
Как решить эту проблему? Использовать vuex? Но если так, то получается, что в vuex надо хранить любые данные, которые являются "справочниками" - города, метро, статусы разных сущностей и т.п. Это правильно?
Да, vuex будет вполне уместен, для вас он будет источником истины, откуда все компоненты будут забирать данные. Сделайте два vuex модуля - cities и stations - в них реализуйте соответствующие crud операции. Компоненты будут из них забирать/передавать необходимые данные.
Я только начал разбираться с Vuex.
У меня есть понимание того, что в компонентах типа "списка станций метро" или "районы города" список городов будет браться из vuex.
Но в какой момент я должен буду получить список городов с сервера? Один раз в момент старта приложения?
Danbka, да, логично забрать данные при старте. После взаимодействия с сервером, например, после добавления сущности, добавляете ее также в хранилище или целиком забираете весь массив сущностей.
Перейти на сокеты? Сделать плагин для Vuex. Можно и без сокетов, если у вас есть есть другой механизм подписки на изменения. На сокетах+Vuex это выглядит примерно так:
socket.on("update_something", data => store.commit("something/update", data));
Средний
