0

Есть страница карточек (предположим, их 50 штук, и они лежат в массиве) Юзер может выбрать любое количество карточек - выбранные карточки попадают в массив "selected".

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

1 ответ 1

0

1 вариант.

Локальные хранилища: sessionStorage, localStorage, локальные базы данных, cookies и т.д.

Плюсы: отсутствие необходимости подключать дополнительные библиотеки

Минусы: без доп. библиотек нет поддержки реактивности "из коробки"; придется хранить JSON-представления ваших карточек, что может быть не очень хорошо, если карточки представлены объектами некого класса: информация о самом классе будет утеряна.

2 Вариант.

Хранить карточки в общем для обеих страниц родителе. При выборе карточек на одной странице, выбрасывать событие в родителя, откуда передавать обновленные данные на вторую страницу. Стандартный Vue-flow: пропы вниз, события наверх. Можно приукрасить интерфейс использованием v-model.

Плюсы: Vue-way. Так можно делать согласно общепринятым нормам вью. Все обновления реактивны. Отсутствие доп. зависимостей.

Минусы: засоряется локальный стейт родителя. Такое решение плохо скейлится.

3 Вариант.

Использовать библиотеку для глобального стейт менеджмента. Их множество под разные паттерны разработки и построения логики приложения, но для Vue существуют официально-поддерживаемые имплементации Flux-паттерна: VueX и Pinia. VueX - для Vue 2, Pinia - для Vue 3 (если грубо).

Плюсы: идеальное решение для вашей ситуации, подходит под нее лучше всего.

Минусы: необходимо внедрять доп. зависимости в проект


Выбирайте исходя из вашего конкретного кейса. Если интересует мое личное мнение, то я бы выбрал вариант номер 3.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.