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

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

19.09.2019 05:42:51 Просмотров 57 Источник

Я занимаюсь разработкой одностраничных приложений с использованием Vuex и Вуэ-маршрутизатор.

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

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

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

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

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

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

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

У вопроса есть решение - Посмотреть?

Ответы - Vuex и Vue-маршрутизатор: изменение страницы и состояния одновременно / Vuex and Vue-router: changing page and state at the same time

Daniel

19.09.2019 06:05:24

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

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

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

Закрыть X