#vue.js
Вопрос:
В веб-приложении, над которым я работаю, есть страница входа в систему, на которой пользователям предлагается выбрать, какой сайт они хотят использовать, этот выбор сайта выполняется следующим образом:
<v-select v-if="step > 0" v-model="userId" label="Select Account" :items="accounts" item-text="owner.name" item-value="id" :rules="[rules.isRequired]" :disabled="step > 1" /> (Имена сайтов, указанные в раскрывающемся списке, сохраняются в таблице mysql под названием владельцы).
Задача состоит в том, чтобы название выбранного ими сайта отображалось на каждой странице. Для этого я намерен поместить имя в навигационную панель вверху, как это:
<v-toolbar-title class="d-flex text-center"> NAME_HERE </v-toolbar-title>
В настоящее время я не могу понять, как бы я привел выбранное ими название сайта и отобразил его так, как я хочу, и был бы очень признателен за помощь.
примечание: код входа взят из файла login.vue, а часть отображения имени находится в AppBar.vue.
Ответ №1:
Существует несколько способов достижения вашей цели.
Передайте значение из корневого компонента
Вы можете сохранить выбранные пользователем значения с помощью обратного login.vue вызова . Пользователь обратного вызова должен вызываться, когда пользователь изменяет имя сайта, а затем передает значения обратно в основной компонент (в данном случае это может быть App.vue).
Но этот метод действительно уродлив, если у вас 5 вложенных компонентов vue, поэтому вам нужно передать функцию обратного вызова через 5 компонентов. Так что давайте поговорим о следующем решении.
Vuex, глобальный магазин
Вы можете хранить ценности где угодно и кем угодно в государственном магазине. Существует библиотека под названием Vuex. Это позволяет сохранять значения, к которым может получить доступ любой компонент.
В этом случае вы можете обновить имя сайта login.vue , а затем AppBar.vue получить к нему доступ самостоятельно.
Подробнее об этом читайте здесь. https://vuex.vuejs.org/
Однако Vuex в некотором роде усложняет ваше приложение. Используйте его, когда нет других способов, которые вы можете придумать.
Комментарии:
1. Я бы предпочел использовать vuex. В моем скромном начале использования Vue я старался как можно больше обходиться без vuex, но как только я начал его использовать, он стал совершенно необходим для сложных веб-приложений imo.
2. Не могли бы вы продемонстрировать, как я мог бы использовать Vuex для решения проблемы, с которой я здесь сталкиваюсь? Просто в качестве примера
3. @JohnTitor вы можете увидеть это здесь. github.com/vuejs/vuex/tree/dev/examples/counter Приложение Counter похоже на ваш проект. Панель приложений-это количество нажатий, а вход в систему-компонент кнопки.
4. @D. Шаллер Добавил немного подробностей о Vuex в мой ответ. Как вы уже сказали, вам не нужно использовать Vuex с самого начала. Если вы используете его слишком рано, это делает ваше приложение слишком сложным. Используйте его в нужное время и в нужном месте, чтобы упростить расширение вашего приложения.