Vuejs / vuex с большим массивом данных

mstdmstd

Новичок
Всем привет,
Разбираясь с vuex(laravel 5.7 / Vuejs 2.6 / "vuex": "^3.1.0"), не нашел в мануалах ответов на некоторые вопросы и основной
прежде всего непонятки с большим обьемом данных в хранилище vuex(в памяти клиента).

В моем приложении есть states(8), regions(24), subregions(> 120) и Hostels(предположительно несколько сот строк в 35 колонок каждая включая 4 поля TEXT ).
Как лучше организовать хранение данных в vuex store? В store я определяю несколько переменных:

Код:
export default {
    mixins: [appMixin],
    state: {  // data
        currentUser: user,
        ...
        statesList: [],
        regionsList: [],
        subregionsList: [],
        ...
        hostelsList: [],
...
Понятно с statesList, regionsList, subregionsList data - данные считываются один раз и неизменны.
несколько простых справочников типа
Код:
$hostelStatusLabelValueArray = Array('A' => 'Active', 'I' => 'Inactive', 'N' => 'New');
 $hostelFeatureLabelValueArray = Array('F' => 'Feature', 'S' => 'Not Feature');
на основе массивов в модели для отображения лейблов enum полей

А как быть с hostelsList ? Там много данных. Получать их “By need”?
Можно очень усложнить выполнение...

есть главная страница - наиболее рейтинговые хостелы
страницы по регионам - с групированными хостелами
страница с хостелами - с возможностью сортировать по разным полям
страница с отдельныс хостелам

И как бы vuex кажется тут очень даже применим - все вышеупомянутые справочники используются на каждой из них, но непонятки с размером данных. Или это решаемо ?

Я взял одну из старых задач - так как есть готовая задача с демо базой.
В этой базе залогинившеймя кастомер(его инфа в в хранилище vuex) гуляет по страницам с хостелами (группируются по штатам и регионам)
на каждом хостеле может прочитать содержимое + обзоры других кастемеров
Кастомер может написать заявку администрации на выбранный хосел с указанием чисел резервирования
Cart в привычном виде тут как бы не нужна - резервировать несколько хостелов не нужно .

также хочу сделать болталку между кастомером и менеджером - это доп 2 таблицы :
Conversations и Messages. Технически загрузить для кастомера в vuex эти 2 таблицы и отображать выбранный Conversation для выбранного менеджера
просто. Но нужно ли?

К обзорам других кастемеров можно добавить свой обзор - к чему тут vuex - вроде и не нужен...

Пункты ваше к тому, а где из них vuex удобен и оправдан?

Спасибо!
 

Adelf

Administrator
Команда форума
Получать их “By need”?
придется. Какие-нибудь популярные, которые сбоку плашкой могут висеть - можно и запомнить. Остальное получать по запросу.

Технически загрузить для кастомера в vuex эти 2 таблицы и отображать выбранный Conversation для выбранного менеджера
просто. Но нужно ли?
Я бы грузил только конверсейшен выбранный. И хранил, если он как в фейсбуке висит где-то внизу. И получал бы обновления по сокетам туда. Все грузить смысла вообще нет.
 

Adelf

Administrator
Команда форума
Не надо бояться подгрузить что-то не очень большое в SPA. При нормальном инете и нетормозящем бэкенде, оно будет мгновенным для юзера всегда. А если то или другое тормозит, то первичная загрузка будет слишком долгая.
 

флоппик

promotor fidei
Команда форума
Партнер клуба
А зачем хранить в реактивном сторадже неизменяемые данные?
 
  • Like
Реакции: WMix

grigori

( ͡° ͜ʖ ͡°)
Команда форума
Полагаете не нужно ? Мне казалочь что как-раз тут и очень удобно - не нужно на каждой странице лезть в базу...
Если данных много, и они изменяются редко - можно хранть в indexedDb, и подтягивать в память по мере надобности. Однако, нужно реализовать протокол обновления на сервере и на клиенте.
Хорошо в этом то, что данные не надо загружать каждый раз, плохо - это месяц работы, если знать что делать.

Объем данных надо считать, это работа product manager/owner. Если это новое приложение - можно написать чтобы работало из оперативки, согласовав это архитектурное решение с заказчиком.
Если заказчик ламер - просто пиши, чтоб работало.
 

grigori

( ͡° ͜ʖ ͡°)
Команда форума
не надо все строки в базе тащить на UI.
А интерфейс рассчитан на latency 2g-сети и нестабильную связь, или экран будет просто морозиться на 10 секунд? Заказчик что думает про реализацию ленивой загрузки?
Кто-то вообще формулировал нефункциональные требования к системе?
 
Последнее редактирование:

grigori

( ͡° ͜ʖ ͡°)
Команда форума
если то или другое тормозит, то первичная загрузка будет слишком долгая.
не забывай про распространенный паттерн - в транспорте, когда на остановках связь есть, а во время движения - не всегда
 

Adelf

Administrator
Команда форума
Ну да. Спорить про неизвестное приложение смысла мало. Я лишь предположил, что это обычное приложение типа букинга... И советовал на основе этого.
 

флоппик

promotor fidei
Команда форума
Партнер клуба
Полагаете не нужно ? Мне казалочь что как-раз тут и очень удобно - не нужно на каждой странице лезть в базу...
Я не говорю, что их не нужно в памяти хранить. Но реактивный vuex, обвешанный обсерверами, гораздо медленее, чем скажем, даже просто компонент с данными. Не говоря уже просто о прокси-объекте с данными, который умеет кешировать запросы к апи справочников.
 

mstdmstd

Новичок
Всем спасибо
Пока что делаю все данные записываю в массивы store и получаю их через через getters,
Возник вопрос как первоначально записаить данные в массивы хранилище vuex
Я пытался в get-методе если массив пуст вызвать action для получения данных:
Код:
!export default {
    mixins: [appMixin],
    state: {  // data
        hostels: [],
        ...
    getters: {  // c

        hostels(state) {
            if (state.hostels.length) {
                return state.hostels;
            }
            state.dispatch('retrieveHostels');
        },

    actions: {  // async methods
        retrieveHostels(context) {
            axios.post('/api/hostels')
                .then((response) => {
                    context.commit('refreshHostels', response.data.hostels);
                })
        },
Но получил ошибку :
Код:
[Vue warn]: Error in render: "TypeError: state.dispatch is not a function"
если же в app.js вызвать :
Код:
 const store = new Vuex.Store(StoreData);
 store.dispatch('retrieveHostels');
То данные считываются нормально, не мне этот способ не нравится ...
Хотелось при первом обращении к данным проверить что если данных нет то вызвать retrieveHostels.
 

Adelf

Administrator
Команда форума
Я на 100% не уверен, но геттер наверняка должен быть чистой функцией. Иначе там кеширования всякие внутренние работать не будут. Так что второй способ. Ты в мире, где применяются почти-функциональные подходы.
 

mstdmstd

Новичок
То есть или
1) в app.js:
Код:
 store.dispatch('retrieveHostels');
причем для всех таблиц которые я хочу запихнуть в store
2) Аналогично на всех страницах где используется hostels делать проверку что если hostels пуст, то выполнить :
Код:
 store.dispatch('retrieveData');
?
1й кажется предпочтительней...
 
Сверху