Pinia stores with data are empty objects {} in DevTools

[simensol]

When I load my app, the data is fetched and the stores are populated as expected:

However, when I inspect the Pinia stores in the DevTools, all stores are empty objects {}:

I have tested in both Chrome v128.0.6613.84 and Safari v17.6. I have tested with the latest Vite Plugin and Chrome extension, and the result is the same.

Environment:

• Vite v5.4.2
• Pinia v2.2.2
• macOS v14.6.1

[webfansplz]

Hi, Can you provide a mini repo?

[simensol]

I have resolved the issue where the Pinia stores appeared as empty objects {} in the DevTools, despite being populated correctly in the application.

The problem was related to the reactivity of the state objects. Specifically, when transforming the state using methods like Object.keys().filter().reduce(), the reactivity was lost.

To fix this, I ensured that the transformed state objects were wrapped with reactive from @vue/reactivity. This preserved the reactivity and allowed the stores to be correctly displayed in the DevTools: