Сначала давайте разберемся с приложением:
- В примере приложения выполняется сбор данных из 2 источников: массив доступных объектов и массив используемых объектов.
- Приложение также отображает новые объекты (доступные не используются).
- Наконец, он также позволяет использовать (зарегистрировать) один из новых объектов
Требования:
- Приложению необходимо сначала отобразить список новых объектов
- Приложению необходимо свести к минимуму количество вызовов API до минимума и совершать вызовы только в случае крайней необходимости
- Вызовы для внесения изменений в данные API (регистр) должны реагировать и немедленно отображать изменения в пользовательском интерфейсе
Код, который я реализовал , соответствует этим 3 требованиям. Тем не менее, я действительно недоволен этой реализацией, и я уверен, что это не способ, которым предполагается использовать хранилище Vuex.
Для начала, моя реализация работает только для определенного порядка, в котором компоненты отображаются на экране:
<new name="New" :selected="true"></new>
<available name="Available"></available>
<using name="Using"></using>
Если я, например, захочу переместить <available> на последнюю вкладку, код сломается.
Это происходит потому, что я не смог просто позвонить dispatch('getNews') один раз и заставить все остальное встать на свои места, не дублируя при этом один или несколько вызовов API, и, следовательно, не отвечая требованиям ...
Я пытался использовать dispatch('...').then().then(), но мне не удалось заставить его работать и соответствовать требованиям.
Я был бы очень признателен всем, кто имел опыт работы в аналогичных ситуациях с Vuex, и скажите, как они это делают.
Бонус, если вы можете сделать это без добавления дополнительных мутаций.