Vuex и Vue-router: изменение страницы и состояния одновременно - PullRequest
Новая
       36

Vuex и Vue-router: изменение страницы и состояния одновременно

1 голос
/ 19 сентября 2019

Я занимаюсь разработкой одностраничного приложения с использованием Vuex и Vue-router.

В настоящее время у меня есть хранилище, состоящее из большого объекта, скажем X, загруженного из базы данных с идентификатором.Я использую Vue-router для навигации между страницами SPA.

Время от времени пользователь может захотеть загрузить другую версию X из базы данных.При этом я также хочу переместить пользователя на «стартовую страницу».И на «стартовой странице», и на странице, на которой сейчас находится пользователь, будет отображаться много информации, полученной из магазина через вычисленные свойства.

Как я вижу, есть два способа справиться с этим, но ни один из ниххороши:

  1. Я загружаю новый объект в хранилище и затем нажимаю на роутер.
    • Проблема: когда я загружаю объект в хранилище из бэкэнда, вся реактивность начинает происходить, и текущая страница, на которой находится пользователь, будет читать новую информацию и вести себя странно.
  2. Сначала нажимаю роутер, а потом обновляюсь.
    • Проблема: Это как бы наоборот.Стартовая страница теперь будет содержать всю информацию о старой версии X и только через некоторое время обновить ее до новой версии.

Для 1 и 2 я получаюколичество ошибок во внешнем интерфейсе / консоли, например, при проверке уникальности.

Одним из решений может быть сначала перейти пользователя на «страницу загрузки», затем загрузить новый объект и затем нажать маршрутизатор.

Мне кажется, это очень простой вопрос Vue, и я, вероятно, скучаю по лучшей практике.

1 Ответ

1 голос
/ 19 сентября 2019

Вариант № 2 является предпочтительным способом (ИМХО)

Чтобы справиться с этим, нужно предотвратить отображение старых данных (что делает маршрут условно загружаемой страницей).Это может быть легко достигнуто путем сравнения сохраненного ключа с ключом маршрута.Если вы используете vuex-router-sync, вы можете получить эту информацию у получателя vuex.

Проблема, которую я вижу с вариантом № 1, заключается в том, что ответ не является немедленным, вам все равно нужно показать, чтоданные загружаются, а затем предотвращают любые другие действия, прежде чем отправлять новый маршрут.Это не обычное явление с точки зрения UX (рассмотрите возможность перехода по ссылке, вы не ожидаете, что перенаправление займет 5 секунд, а затем отобразит полностью загруженную страницу).Кроме того, вам все еще нужно отключить пользовательский интерфейс во время загрузки или предпочтительно иметь возможность прерывать процедуру загрузки, чтобы предотвратить выполнение маршрута, если пользователь выполняет другой маршрут во время загрузки данных.

...