Vuex "拼接"和"设置"突变在大型列表/字典上极慢

Question

我有一个Nuxt 2应用程序，具有以下vuex(v3(状态和简单突变：

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')
},
// ...
}

只要列表和dict很小，一切都很好，但一旦它们变大(目前每个条目约6000个(，突变就会变得非常缓慢，splice和set的突变速度分别约为50-100ms(MacBook Pro 2018(。

对不属于状态的dict副本的测试非常快~0.01ms。

这是vue/vuex反应性的问题，还是我的代码的问题，有什么方法可以让它更快吗？

Answer 1

事实证明，在我的vuex设置中打开了严格模式，这为拼接和设置操作增加了约50-100ms。使用strict = false，两个操作所需时间均小于1ms。

有关详细信息，请点击此处：https://vuex.vuejs.org/guide/strict.html