Как использовать олицетворение в приложении Vue.JS

Question

Я работаю над приложением с интерфейсом Vue.JS, в котором пользователь входит в систему и отправляется в список других пользователей. Также на этой странице есть еще одна вкладка со списком больниц (после нажатия вы попадете на новую страницу со списком больниц).

Один из методов, который может использовать вошедший в систему пользователь, находясь на странице пользователя, - это выбрать одного из пользователей для олицетворения. После того, как они подтвердят, что хотят выдать себя за этого пользователя, страница пользователя обновится, чтобы отобразить сетку со списком пользователей, к которым у этого выданного пользователя есть доступ. Выдавая себя за другое лицо, они также должны иметь возможность переходить между вкладками (от пользователей к больницам), продолжая олицетворение, так что теперь список больниц будет отображать список больниц, к просмотру которых олицетворенный пользователь имеет доступ. Чтобы подтвердить, что пользователь выдает себя за другое лицо, на странице должно быть текстовое поле, показывающее, что "{Пользователь} теперь выдает себя за другое лицо".

Я могу выполнить часть 1, выдавая себя за пользователя на странице пользователя, но как только я нажимаю на больницы, данные, которые хранятся как isUserImpersonated, обновляются (после создания олицетворения isUserImpersonated переключается с false на true. page, isUserImpersonated снова переключится на false). Как я могу сохранить одинаковые данные для каждой страницы вместо обновления после отображения нового пути (localhost:8080/users -> localhost:8080/hospital?

Я пытаюсь использовать EventBus после просмотра документации, которая, похоже, работает, но данные не останутся прежними после визуализации новой страницы.

Кто-нибудь использовал олицетворение в проекте Vue.JS? Есть ли у вас какие-либо советы или идеи о том, что я могу сделать, чтобы убедиться, что isUserImpersonated остается неизменным, если пользователь переключается между страницами?

Answer 1

Во-первых, причина того, что это не работает, заключается в том, что внесенные вами изменения хранятся в памяти, которая стирается при переходе на новую страницу.

Чтобы это работало, вам нужно использовать какое-то постоянное хранилище. У вас есть несколько вариантов:

1. Хранить и загружать выданные пользователем данные с помощью файла cookie

   с использованием vue-cookie

   this.$cookie.set('impersonation', { ... store whatever data you need }, 1);
   

   Проверьте, не выдаете ли вы себя за пользователя при загрузке страницы:

   mounted() {
     this.impersonation = this.$cookie.get('impersonation');
   }
   

2. Хранить выданные пользователем данные на сервере

   Эта реализация полностью зависит от вашего серверного стека. Большинство фреймворков предлагают сеанс или кеш, которые вы могли бы использовать.

Answer 2

3. Используйте Vuex для управления состоянием. Я немного расширяю ответ Винса выше. Во-первых, да, я успешно использовал олицетворение в приложении Vue. По мере масштабирования вашего приложения, что, вероятно, связано с тем, что вы работаете с больницами (не уверен, что это для школьного проекта или для реальных вещей), вы будете получать доступ и изменять состояние из нескольких мест. Vuex дает вам возможность отделить состояние от представления и позволяет изменять его с помощью действий. Я настоятельно рекомендую хотя бы изучить его.