[useStorage] Error in console when integrated with Pinia

[N0153]

Describe the bug

After updating the @vueuse/core to version 9.8.2 I'm getting this error everytime I try to set a value in the storage using an action defined in a Pinia store

TypeError: Failed to construct 'StorageEvent': Failed to read the 'storageArea' property from 'StorageEventInit': Failed to convert value to 'Storage'.
    at write (@vueuse_core.js?v=0b11bf63:2580:62)
    at watchPausable.flush.flush (@vueuse_core.js?v=0b11bf63:2565:80)
    at filter.fn.fn (@vueuse_core.js?v=0b11bf63:99:21)
    at bypassFilter (@vueuse_core.js?v=0b11bf63:104:10)
    at eventFilter (@vueuse_core.js?v=0b11bf63:183:7)
    at wrapper (@vueuse_core.js?v=0b11bf63:99:5)
    at callWithErrorHandling (chunk-QO6ZHO7P.js?v=482669c2:1378:18)
    at callWithAsyncErrorHandling (chunk-QO6ZHO7P.js?v=482669c2:1386:17)
    at job (chunk-QO6ZHO7P.js?v=482669c2:2660:9)
    at flushPreFlushCbs (chunk-QO6ZHO7P.js?v=482669c2:1512:7)

Rolling back to version 9.8.1 of @vueuse/core seems to solve the issue.

Reproduction

https://stackblitz.com/edit/usestorage-issue-pinia?file=src/App.vue

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 5.53 GB / 15.90 GB
  Binaries:
    Node: 16.17.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 108.0.5359.125
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.54)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[itsmnthn]

I found the same error. Error logs when using useStorage inside the Pinia store.

It logs the error but seems working as expected

[43081j]

seems this is because of @antfu's change in 800f74f.

looks like that was changed so two instances of useStorage are aware of each others mutations.

however, you can only construct a StorageEvent for an instance of Storage (local, session, etc. native things since you can't actually new up Storage directly iirc).

im guessing various people were already using useStorage with non-native storage objects, which this change will have now broken.

also @antfu, it does seem like misuse of the storage event. the intent of the native storage event is so other windows are aware of storage changes, not within the same window. technically you could solve this by newing up a CustomEvent instead with the same detail structure, same name. But i feel like you'd still be going against what a storage event is for... maybe because of that you should use your own event rather than trying to reuse the name of a native one?

firing these non-standard storage events on the window could confuse third party code/libraries which depend on that event working as defined in the spec.