Adding many objects to Vuex state is slow

#1

I’m adding 4600 objects to my Vuex state as the user selects the data they wish to work with. I’m using Vue.set() as prescribed in the documentation. The Vue.set() is very slow - on the order of 100 seconds for the 4600 objects. Each object contains 3 ints and a bool. Am I doing something wrong or ?

const state = {
  someObjs: {},
  someOtherObjs: {}
}

mutations.ADD_SOMEOBJ = function(state,someObj)
{
  Vue.set(state.someObjs,someObj.id,someObj);
}

actions.addSomeObjs = function(context,payload)
{
   getObjsFromServer(payload,function(objs)
   {
      var i;

      for (i = 0; i < objs.length; i++)
        context.commit("ADD_SOMEOBJ",objs[i]);
   });
}
1 Like
#2

Is this code used elsewhere in any components to render said objects? Just running a test myself and I was able to store 4600+ objects less than a second, but that tells nothing about a real world scenario or what else you may doing.

Are you using any UI libraries in your components?

#3

I will second @bolerodan in that if you are rendering something to the dom for each of these objects then you almost certainly will have a huge performance hit and it will take quite some time to render them all. That would be my first guess.

#4

Nope, these objects are not rendered. Just setting up my data model for the application. I have trimmed index.html has just my app

in it and no additional libraries other than vue and vuex. I load the 4600 objects from the server, loop through them calling commit() to add them to the state, just like my example code. It takes 45 seconds for the commit() loop to complete.
#5

can you create a jsfiddle to see if you can try to replicate this with mock data. What version of Vue/Vuex, what browser and version? Are you sure its not a network calll, or the function you’re invoking that gives you the objects that you then loop over? What happens if you comment out your commit() call, can you print out timestamps as well?

Without seeing other code in your project sorta shooting blanks. I manage to store 100,000+ items of scientific data in less than a few seconds in one of my projects, that renders that in a graph, just as an example, so something else somewhere must be going wrong.

#6

@bolderan: are you committing each of those individually, as OP does?

I would suspect that the bottleneck here is the vue devtools. with each mutation, the devtools do a deep-clone of the state to cache it for time-travelling.

genrally, I would write a sort of batch- mutation to commit all obejcts at once.

3 Likes
#7

@LinusBorg Actually good point. I batch those to one commit in my personal apps.
However in my test case example (Which I never posted) I quickly thew up in a fiddle, I do not. (pretty much copied and pasted his code)

And yes, Devtools heavily slowdown the application over time which is another good point.

#8

Found the problem. I had “strict” set to true in my store. Takes about 0.5 secs to commit all 4600 with strict turned off. Thanks for the help, I really appreciate it.

3 Likes
#9

Oh, right. Strict mode has to rely on a deep watch on the whole state to catch changes happening outside of mutations, and that has a heavy performance impact. totally forgot about that.

2 Likes
#10

dude this saved my life

1 Like