Vuex 'splice' and 'set' mutations extremely slow on large lists/dicts

Question

I have a Nuxt 2 application with a the following vuex (v3) state and simple mutation:

state: {
  bulletsList: [],
  bulletsDict: {}, 
  // ...
}

mutations: {
  createBullet(state, data) {
    // Compute index based on some criteria...
    idx = ...

    // Non-state test
    // Only to check sanity, not in actual code...
    dictCopy = structuredClone(state.bulletsDict)
    console.time('test')
    Vue.set(dictCopy, data.id, data)
    console.timeEnd('test')
    // END test

    // Update list
    console.time('splice')
    state.bulletsList.splice(idx, 0, data)
    console.timeEnd('splice')

    // Update dict
    console.time('set')
    Vue.set(state.bulletsDict, data.id, data)
    console.timeEnd('set')
  },
  // ...
}

As long as the list and dict are small everything is fine, but once they get larger (currently ~6000 entries each) the mutations get extremely slow, ~50-100ms each (MacBook Pro 2018) for splice and set.

The test on a copy of the dict, which is not part of the state is very fast ~0.01ms.

Is that a problem of vue / vuex reactivity, or my code somehow, and is there any way to make it faster?

Answer 1

It turns out that strict mode was turned on in my vuex setup, which added ~50-100ms to the splice and set operations. With strict = false both operations take less than 1ms.

More details on that here: https://vuex.vuejs.org/guide/strict.html