1

When I go to commit() a large object (a machine learning model; lots of floating point numbers, about 20MB as a compressed msp file) in a vuex store I get _traverse() stopping with "Paused before potential out-of-memory crash".

I'm putting it in vuex because it will be used by a component quite deep in the hierarchy, and possibly by multiple components. And because it is always used together with other data I'm putting in this same vuex store.

What are my options? Is there a way to keep something in vuex but say treat it as a "blob", and not add observers on every single array element? It will sometimes get updated, but if so it will always be the whole thing being replaced.

If not, my best idea so far is to put it in a global variable. I think I could even write a vuex getter to access that global variable - there is no requirement that a vuex getter read from state is there? (I could even have something like an "updateCnt" variable in the state, so the reactive side of things still works?)

But, this is a large complex project, and using a global comes with a code smell, so I want to be sure I am not missing a better solution.

EDIT AS REQUESTED: not duplicate of Restrict vue/vuex reactivity (though the answers there are useful)(also How can I prevent Vuex from interfering with my class instance?), as the emphasis here is on what is the best solution (to have access, of large data that sometimes changes, in multiple vue components) rather than "how do I get it work with vuex". (Also, the Object.freeze() solution only half-works: adding to state works, but the vue browser tools then end up crashing.)

Darren Cook
  • 27,837
  • 13
  • 117
  • 217
  • 1
    Perhaps `Object.freeze`? That should stop the observers being added. – skirtle Sep 02 '19 at 15:35
  • @skirtle Thanks. That did "work" (as long as freezing *before* assigning to `state`). My globals idea worked equally well. In both cases, the vue.js devtools choked on it, when I clicked the vuex tab, and ended up giving a similar error. I suspect I will end up self-answering with "in a dedicated module, not in vuex". But I'll give it a couple of days to see if this solution also hits problems. – Darren Cook Sep 02 '19 at 18:03
  • Possible duplicate of [Restrict vue/vuex reactivity](https://stackoverflow.com/questions/44307077/restrict-vue-vuex-reactivity) – bernie Sep 02 '19 at 21:13
  • @DarrenCook wondering what your solution was at the time as I'm trying to look into doing something similar – flowen Mar 11 '21 at 12:40
  • 1
    @flowen We do just use `Object.freeze()` and generally keep large data objects away from Vue/Vuex. – Darren Cook Mar 11 '21 at 14:04
  • @DarrenCook thanks for the reply Darren. In the meantime I opted for localForage to save the blob in there! – flowen Mar 11 '21 at 16:04

0 Answers0