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.

• [x] Display all getters in the Inspector View (🍍 Pinia (root))
• [x] 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.
• [x] Add a settings panel (https://devtools.vuejs.org/plugin/plugins-guide.html#plugin-settings)
  • [ ] Use emojis in messages (defaults to true)
  • [x] Disable "x store installed" message https://github.com/vuejs/pinia/discussions/1070
  • [x] 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
• [x] 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.

[j4k0xb]

Editing some state (e.g. the percent) using Pinia (root) leads to an error:

And it would also be nice if the root overview shows getters etc instead of only the store's state

[DannyFeliz]

It would be great if we could reset the state of an entire store using a button, i.e. having an action that calls store.$reset()

https://pinia.esm.dev/core-concepts/state.html#resetting-the-state

[posva]

I fixed the error when changing from the root store. Having all the getters would be nice!

@DannyFeliz That should be doable with https://devtools.vuejs.org/plugin/api-reference.html#on-inspectcomponent

[JoseLuisRNP]

Would time travelling be possible?

[Djaler]

I found that mutation info about array/object modifying isn't complete. Given: Method that simply pushes new value to array in the store. Mutation info: As you can see, there are no information about what store field was modified.

[posva]

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

[izerozlu]

I'm having a somewhat weird bug. If I do initiate a store from my Vue3 application's main.ts file, Pinia instance does not get bound to devtools. Therefore cannot inspect the store whatsoever.

const app = createApp(App);
app.use(createPinia());
app.mount("#app");

if (user) {
  const rootStore = useRootStore();
  rootStore.setUser(user);
}

This is what I'm doing basically.

PS: Store gets initialized without a problem. Can observe the state of rootStore.

Devtools version: 6.0.0.20 Vue version: 3.2.16 Pinia version: 2.0.4

[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

[KohliSuraj]

Is there a way to track the actions on chrome Vue dev tools when using Pinia with Vue3?

[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.

[Ragura]

I seem to be encountering a devtool related issue with Pinia. I defined a new store using the composition API method (not the object store format) and when directly modifying a returned ref's value it is not reflected in the devtools but the mutation does happen and works. If I use the variable somewhere in the template, for example using {{ the_variable }}, then the devtools do update the value. Manually clicking the refresh button also does the trick. Anything I'm missing or doing wrong, or is this a limitation of the devtools together with Pinia?

[posva]

@Ragura that is an expected behavior of the devtools: it won't update something if it's not used. It's okay to use the refresh button for stuff like that 🙂

[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.

[drrible]

maybe main branch my cognitive dissonans saying me

[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.