如何在浏览器DevTools中调试多个Zustand Store

要同时在浏览器DevTools中调试多个Zustand Store，核心是给每个Store的devtools中间件指定唯一的名称标识——官方默认会把所有未命名的Store合并到同一个实例下，导致只能看到一个。

具体实现步骤 #

给每个Store的devtools配置添加name参数，确保名称唯一：

第一个Store示例：

import { create } from 'zustand'
import { devtools } from 'zustand/middleware'

const useFirstStore = create(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set(state => ({ count: state.count + 1 }))
    }),
    { name: 'FirstStore' } // 唯一名称
  )
)

第二个Store示例：

const useSecondStore = create(
  devtools(
    (set) => ({
      username: '',
      setUsername: (name) => set({ username: name })
    }),
    { name: 'SecondStore' } // 与第一个不同的名称
  )
)

验证与排查 #

1. 打开Redux DevTools扩展，切换到"State"标签，就能看到两个独立的Store实例
2. 若仍不显示，检查：
   • Redux DevTools扩展是否为最新版本
   • 在DevTools设置中开启"Use custom store name"选项
   • 触发一次Store的状态变更（比如调用increment或setUsername），日志会自动出现

关于第三方工具的说明 #

• 官方devtools中间件加名称的方法是最稳定的解决方案，无需依赖第三方包
• 若之前尝试的@pavlobu/zustand/middleware或Zukeeper无效，大概率是版本兼容问题（比如Zustand v4+对第三方中间件的适配要求），优先使用官方方案即可

内容的提问来源于stack exchange，提问作者Maykel