Pinia Devtools Wishlist

[posva]

I think it would be nice to gather feedback about how to improve the existing devtools or reporting bugs.

If you find something that you think can be improved, a screenshot is usually enough to help describe the improvement. I want to use this issue to track those improvements.

• Display all getters in the Inspector View (🍍 Pinia (root))
• Allow calling $reset() directly from the devtools (Using actions + adding this in formatStoreForInspectorState(). This should only appear in the inspector view, next to the state property.
• Add a settings panel (https://devtools.vuejs.org/plugin/plugins-guide.html#plugin-settings)
  • Use emojis in messages (defaults to true)
  • Disable "x store installed" message Issue with alerts in console #1070
  • Show stores in components (defaults to true) This can be set already in plugin settings
• Time travelling
  • Changing the current state from the timeline (should not add new events)
  • Use a patch-driven approach like in Vue Devtools for perf reasons
• Clear ans concise information about single mutations
• Allow prod devtools (with less information because events might not be there)
• Clicking on a store in pinia devtools should make it available as a global variable
• Add component originator of an action

Please do not use the issue to report bugs, use the Discussions for help or open an issue with a boiled down reproduction for bugs.

[Djaler]

The information should be in effect or target but there are plans to improve the display of mutations in the timeline too

What do you think about such idea: save previous store state using deep clone, so on state change we can compare it with previous

[plweil]

The yellow color used for some of the text and the mutation markers is much too difficult to see in the (Chrome) light theme. Something with more contrast is needed.

[Caruki]

When using the Vue Devtools in production mode with the provided flag VUE_PROD_DEVTOOLS the pinia plugin is not showing up. Even though other plugins (i18n or router) are. Is this a known issue with pinia?

[EmmanuelQ]

Would be great to show the actual state property being modified eg here we know the store is pokedex but i'd like to know the state property that "set" is targeting.

[baixiaoyu2997]

i hope action event can custom props, i want add some props, like event from file and code lineNumber

[JackEdwardLyons]

Any news on when Time travelling will be available in the dev tools?

[MuhammadM1998]

One major feature imo is implementing NuxtServerInit like Vuex.
Auto importing defineStore and acceptHMRUpdate by default in nuxt 3 for minimal config (just adding pinia to modules) would be great for a lazy person like me.

[emahuni]

What problem does this feature solve?

The idea is to use a Pinia store that is selected in Pinia devtools the same way that you can use a selected Vue component, see below screenshots:

With Vue components one can select a component and immediately manipulate it in console using $vm:

A similar approach would go a long way to enable Pinia usage when a pinia store is selected:

on above shot, $p will refer to the selected Pinia store and is a shortcut of finding a component that is using the store, selecting it, then use it as $vm.filtersStore that is if the developer exposed the store.

I normally use this to reset the store, manipulate other props or functions of the store manually to test things. If this works just like Vue components, this will be super duper great.

As you can see from my console "autocomplete" I have to find a component that uses the store in Vue first, click on it so I have access to $vm then access the store thru $vm.blahStore that is IF i had exposed it in that component.

[nikolay-yavorovskiy]

Is "Disable "x store installed" message" resolved?

[cobaltt7]

When using the Vue Devtools in production mode with the provided flag VUE_PROD_DEVTOOLS the pinia plugin is not showing up. Even though other plugins (i18n or router) are. Is this a known issue with pinia?

Does anyone know how to fix this?

[Clive-Ward-Cron]

Is there any intention of integrating the pinia dev tools into the nuxt dev tools panel, or is that out of the scope of this conversation?

[chadwtaylor]

+1 Any update, would love that. I was able to use it with Vuex, but want to stay away from that.