Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pinia Devtools Wishlist #732

Open
6 of 13 tasks
posva opened this issue Oct 20, 2021 · 23 comments
Open
6 of 13 tasks

Pinia Devtools Wishlist #732

posva opened this issue Oct 20, 2021 · 23 comments

Comments

@posva
Copy link
Member

posva commented Oct 20, 2021

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.

@j4k0xb

This comment has been minimized.

@DannyFeliz

This comment was marked as resolved.

posva added a commit that referenced this issue Oct 27, 2021
@posva

This comment was marked as resolved.

@JoseLuisRNP

This comment was marked as resolved.

@Djaler

This comment was marked as resolved.

@posva

This comment was marked as resolved.

@izerozlu

This comment was marked as off-topic.

@Djaler
Copy link
Contributor

Djaler commented Dec 13, 2021

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

@posva posva pinned this issue Dec 28, 2021
@KohliSuraj

This comment was marked as off-topic.

@plweil
Copy link

plweil commented Mar 5, 2022

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

This comment was marked as off-topic.

@posva

This comment was marked as off-topic.

@posva posva changed the title Pinia Devtools Wishlist / Bugs Pinia Devtools Wishlist Apr 13, 2022
@Caruki
Copy link

Caruki commented Jun 3, 2022

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
Copy link

EmmanuelQ commented Aug 30, 2022

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.

Screenshot 2022-08-31 at 00 22 11

@drrible

This comment was marked as spam.

@baixiaoyu2997
Copy link

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

@JackEdwardLyons
Copy link

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

@MuhammadM1998
Copy link

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
Copy link

emahuni commented Dec 13, 2022

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:
image

A similar approach would go a long way to enable Pinia usage when a pinia store is selected:
image
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
Copy link

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

@cobaltt7
Copy link

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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests