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

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?

CodePudding user response：

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