vuejs / vuejs/devtools

feat: Pinia panel Store optimization (support one-click expand/collapse, search)

Open
#467 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement good first issue
Dominant language
TypeScript
Stars
2.9k
Forks
279
PR merge metrics
No merged PRs in 30d

Description

Description of the problem

The current Pinia Store management interface is always put away by default every time you enter it, which is not convenient for users to debug, or to quickly view Pinia Stores, and this situation becomes more and more obvious with the increase of layers and Stores, so I hope it can be improved.

Expected results

  • Support for expanding/collapsing Pinia Store data structures with a single click.
    • One-click operation for all Stores
    • Expand/collapse operations for a specific Store node (with interaction provided by the current node Hover).
  • Provide Pinia Store key-value pair retrieval (at the top of the Store panel).

Other

Compared to the management of Compoments Tree, Pinia Store doesn't have similar ability to “locate Compoments based on DOM”, so providing easy and flexible interactions seems to be an effective way to improve it. If you have better ideas, please feel free to discuss them :)

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the Pinia Store panel and the existing Components Tree interactions, then trace how Store nodes are rendered and updated. Done means supporting one-click expand/collapse for all Stores, node-level expand/collapse controls, and key-value search at the top of the panel; verify each interaction in the devtools UI.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
devtools
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.