Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mstdmstd's avatar

How better organize keeping of data in store with hundreds hostel rows

Hello, In my laravel 5.7 / Vuejs 2.6 / "vuex": "^3.1.0"/ bootstrap": 4.3 app I make app with states(8), regions(24), subregions(> 120) and Hostels(supposed there would be several hundrets rows with 35 columns any ). My question is how better organize keeping of data in store? In my store files I have vars defined for data mentioned above:

export default {
    mixins: [appMixin],
    state: {  // data
        currentUser: user,
        ...
        statesList: [],
        regionsList: [],
        subregionsList: [],
        ...
        hostelsList: [],
...

That seems clear with simple statesList, regionsList, subregionsList data - they can be read at first data retrieved and these data are static. But if I have to upload all hostelsList ? That is quote a lot of data. To retrieve them “By need”? In this app any hostel can opened by url of 1 hostel, groups of hostels by state/region/ most rating histels etc... To upload data and to add therm to hostelsList array, with method in store like:

refreshHostelsList(state, payloadHostelsList) {
    alert( "refreshHostelsByRegionIdStateId payloadHostelsList::"+var_dump(payloadHostelsList) )
    console.log("refreshHostelsList::")
    console.log( payloadHostelsList )

    payloadHostelsList.map((nextPayloadHostel, next_key) => { // check which of Payload rows must be added to state.hostelsList
        var L= state.hostelsList.length
        var is_payload_in_state= false;
        for ( var I= 0; I< L; I++ ) {
            if (state.hostelsList[I].id == nextPayloadHostel.id) {
                is_payload_in_state= true;   // payload nextPayloadHostel.id was not in nextPayloadHostel.id - to adde it
                break;
            }
        }
        if ( is_payload_in_state ) {
            state.hostelsList[state.hostelsList.length] = nextPayloadHostel;
        }
    }); // payloadHostelsList.map((nextPayloadHostel, next_key) => { // check which of Payload rows must be added to state.hostelsList

},

But that seems rather complicated. As vuex lib is JS lib all data are kept on client I am afraid that could be memory lack error.

  1. If there is a way to deal it?

  2. Maybe to keep statesList, regionsList, subregionsList in vuex store but without hostelsList and upload data from hostel on page I need them from db? As I meantioned before hostelsList is upoosed rather a big set of data.

  3. Though statesList, regionsList, subregionsList are static but they have active field, so setting active = false, these data must be hidden from frontend. How that could be implemented that when in backend part admin changing state.active = false/true we need to set flag that all clients part stateList must be readred from db ?

Thanks!

0 likes
1 reply
mstdmstd's avatar

Sorry, I would like to get some help from developers with expierence in centralizing big amount on data on vuex. If there is a way to define : that is the limit and these data are too much for vuex? especcially meaning that vuex is js client library running on different devices... Till now I suppose that point 2) mentioned in my content seems good decision.

As for point 3) I think using of events/websocket could be usefull here, could you please hint some details here ?

Please or to participate in this conversation.