Как перенести массив с одной страницы на другую
Есть страница карточек (предположим, их 50 штук, и они лежат в массиве) Юзер может выбрать любое количество карточек - выбранные карточки попадают в массив "selected".
Мне необходимо, чтобы массив selected сохранялся у юзера локально и появлялся на другой странице. Подскажите, пожалуйста, как это проще всего реализовать?
Ответы (1 шт):
1 вариант.
Локальные хранилища: sessionStorage, localStorage, локальные базы данных, cookies и т.д.
Плюсы: отсутствие необходимости подключать дополнительные библиотеки
Минусы: без доп. библиотек нет поддержки реактивности "из коробки"; придется хранить JSON-представления ваших карточек, что может быть не очень хорошо, если карточки представлены объектами некого класса: информация о самом классе будет утеряна.
2 Вариант.
Хранить карточки в общем для обеих страниц родителе. При выборе карточек на одной странице, выбрасывать событие в родителя, откуда передавать обновленные данные на вторую страницу. Стандартный Vue-flow: пропы вниз, события наверх. Можно приукрасить интерфейс использованием v-model.
Плюсы: Vue-way. Так можно делать согласно общепринятым нормам вью. Все обновления реактивны. Отсутствие доп. зависимостей.
Минусы: засоряется локальный стейт родителя. Такое решение плохо скейлится.
3 Вариант.
Использовать библиотеку для глобального стейт менеджмента. Их множество под разные паттерны разработки и построения логики приложения, но для Vue существуют официально-поддерживаемые имплементации Flux-паттерна: VueX и Pinia. VueX - для Vue 2, Pinia - для Vue 3 (если грубо).
Плюсы: идеальное решение для вашей ситуации, подходит под нее лучше всего.
Минусы: необходимо внедрять доп. зависимости в проект
Выбирайте исходя из вашего конкретного кейса. Если интересует мое личное мнение, то я бы выбрал вариант номер 3.