web-infra-dev / web-infra-dev/garfish

vite 应用在后台管理系统中,如何做 tab 页签缓存

Open
#752 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.9k
Forks
234
PR merge metrics
No merged PRs in 30d

Description

Describe the bug
Image 我试了,如果这样动态函数式创建组件,与 keepalive 结合使用,切换 tab 的时候,缓存要么就是第一次不行,要么就是清理不掉,onBeforeUnmount 也会触发多次, ,切换跳转用的是 router = useRouter(); 来跳转的 你们内部有试过 tabs 的缓存吗,而且 store 主应用也子应用共享,如果通过 props 传递主应用的 store ,在 script 里能正确获取到,但是监控不到 主应用store 的变化
Reproduction

main

Used Package Manager

npm

System Info
System:
    OS: macOS 26.1
    CPU: (10) arm64 Apple M4
    Memory: 211.56 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.19.5 - /Users/applebad/.nvm/versions/node/v20.19.5/bin/node
    Yarn: 1.22.22 - /Users/applebad/.nvm/versions/node/v20.19.5/bin/yarn
    npm: 10.8.2 - /Users/applebad/.nvm/versions/node/v20.19.5/bin/npm
    pnpm: 10.20.0 - /Users/applebad/.nvm/versions/node/v20.19.5/bin/pnpm
  Browsers:
    Safari: 26.1
  npmPackages:
    @garfish/bridge-vue-v3: ^1.19.7 => 1.19.7 
    garfish: ^1.19.7 => 1.19.7
Validations

Contributor guide

Open the contributing guide

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 with the main reproduction and the @garfish/bridge-vue-v3 integration, focusing on the keepalive tab switching described in the report. Reproduce navigation through useRouter and observe cache eviction, onBeforeUnmount calls, and shared-store updates. Done means a minimal reproduction and a clearly confirmed framework behavior or fix path, but the payload does not identify source files or tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, vite
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.