Store object have a weight?

Hello,

I would like to understand if using the store adds weight to the page, for example I use it to store various customer lists with relative images in base64 format.
If it should have weight on the page where can I check it (for example for the service worker I can view it in the appropriate tab in the google console)? Is there a limit? Is it always better to use local DBs like dexie?

Thank.

first let’s create an array on 1mln items

const list = [...Array(1000000).keys()];

or:

createStore({
  state: { list: [...Array(1000000).keys()] }
});

list (or store.state.list) doesn’t really contain 1mln items.
the items are stored in your machine memory.
list (or store.state.list) contain only the address (ref) of the location in mem.
something like this (dummy):

0xf094c649

bottom line:

const string = "0xf094c649 0xf094c649";
const array = [...Array(1000000).keys()];

if you pass those two values:
the string has double the size of the array (of 1mln items)

i know, it sounds crazy, but that’s how it works.

array of 1mln images in (base64), stored in f7-store.
no real change in performance => suspicious-wood-l6ftrs - CodeSandbox

So seems like a good choise use f7 store instead of dexie or similar

f7-store data will be gone at the end of the session.

added [upload media] => suspicious-wood-l6ftrs - CodeSandbox
just for you…
if you play with media you might find it useful.

Thanks bro when i come back at work i will see all, and give you some feedback thanks

That’s not a problem, because I need it to make the application run faster and when it goes offline.

The only inconvenient thing is that using it as a mini database is sometimes cumbersome, for example I have this structure:

(first category) 
A -> b/c 
        (Second category which depends on the first)
        b -> d/e
        c -> f/g
               (Third category)
               d -> h/i

State structure:

state: {
       firstCategory: [...] //array of object with data
       secondCategory: [...] //array of object with data
       thirdCategory: [...] //array of object with data
       tempIdFirst: 1 //int of id selected (first)
       tempIdSecond: 1 //int of id selected (first)
       tempIdThird: 1 //int of id selected (first)
}

So if i need for example “i” data:

//in the router/page
store.dispatch('updateTempIdSecond', parseInt(id));
//in the store:
updateTempIdSecond( { state }, id) {
    state.tempIdSecond= id;
},

//in the router/page
store.dispatch('updateTempIdThird', parseInt(id));
//in the store:
updateTempIdThird( { state }, id) {
    state.tempIdThird= id;
},

And just then return it:

//store getters
retriveThird( { state }) {
    return (some condition for see if exist the upper category) ? 
    state.thirdCategory[state.tempIdSecond]['thirdCategory'].find(el => el.tempIdThird === state.tempIdThird) : [];
}

Instead in dexie seems like more user friendly like:

db.thirdCategory.where("id").equals(id).toArray()

That will return directly the array or the empty array, basically I have to do one or two less operations.
But there are several limitations with that method like memory, some incompatibilities etc.

f7Store main goal is reactivity (and SSOT),
dexie (and others) is to store the data.

you can use a combination of both

didn’t get your data structure
this line does not make any sense (at least it works for you)

state.thirdCategory[state.tempIdSecond]['thirdCategory']

Doesn’t have sense because is not an array :sweat_smile: is object like:

state:{
   thirdCategory: {
           1: {  //id of Second category
                 thirdCategory: [] //array of third
           }
   }
}
const state = {
  thirdCategory: {
    1: {  
      thirdCategory: [1,2,3] 
    },
    2: {  
      thirdCategory: [4,5,6] 
    }
  },
  tempIdSecond: 2,
  tempIdThird: 5
};

const retriveThird = () =>
  Object.entries(state.thirdCategory)
    .filter(([k]) => k == state.tempIdSecond)
    .flatMap(([_,v]) => v.thirdCategory)
    .filter(i => i == state.tempIdThird);

console.log(retriveThird()); // => [5]

So it’s better use a filter directly instead of use getters in this case?
I really don’t understand why getters doesn’t have directly a parameter for filter into the function

const store = createStore({
  state: {
    thirdCategory: {
      1: {  
        thirdCategory: [{ id: 1 },{ id: 2 },{ id: 3 }] 
      },
      2: {  
        thirdCategory: [{ id: 4 },{ id: 5 },{ id: 6 }] 
      }
    },
    tempIdSecond: 2,
    tempIdThird: 5
  },
  getters: {
    retriveThird: ({ state }) => 
      Object.entries(state.thirdCategory)
        .filter(([k]) => k == state.tempIdSecond)
        .flatMap(([_,v]) => v.thirdCategory)
        .filter(i => i.id == state.tempIdThird)
  }
});

console.log(store.getters.retriveThird.value); // => [{ id: 5 }]

Yes is same like i did.

read it => framework7/create-store.js at master · framework7io/framework7 · GitHub
you will understand why