search

vuejs / devtools

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools.vuejs.org/
MIT License
1.7k stars 122 forks source link

Pinia stores with data are empty objects `{}` in DevTools #575

Closed simensol closed 1 month ago

simensol commented 3 months ago

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

Eisi Eisi

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

Eisi

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:

webfansplz commented 2 months ago

Hi, Can you provide a mini repo?

simensol commented 1 month ago

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:

DevTools