Slow performance when large non persisted object is present in the store

[Xay7]

Are you using Nuxt?

• [ ] Check this box if you encountered the issue using Nuxt and the included module.

Describe the bug

When there's a non persisted large object in the store and another persisted state in the store is updated, the app becomes noticeably slower.

Reproduction

https://stackblitz.com/edit/github-fc5fmk?file=src%2Fcomponents%2FHelloWorld.vue

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm

Used Package Manager

pnpm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible of the bug.

[prazdevs]

This is most likely due to the behaviour of pick/omit. These operations can get heavy on large objects. The plugin ignores the complexity of the state and naively apply the operations, which can result in performance drop.

If you need persistence in a store that with this specificity (only persist a small bit of data out of a massive state), I'd not use the plugin and use something like vueuse's useLocalStorage only for that bit of data.

This isnt really an "issue" as this is expected behaviour due to how the plugin is built and process mutations