zustand 调试

首先浏览器需要安装 Redux DevTools 插件, 然后在代码中添加 devtools 中间件即可

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

type UserInfo = {
  id: string;
  name: string;
  /** 余额(分) */
  balance: number;
  registerTime: string;
};

type UserStore = {
  userInfo?: UserInfo;
};

const useUserStore = create<UserStore>()(
  devtools(
    (set, get) => ({
      userInfo: undefined,
    }),
    {
      name: 'user_store', // 浏览器调试时显示的 store 名称
      enabled: true, // 是否开启调试工具(通常根据当前环境开启/关闭)
    },
  ),
);

export default useUserStore;

打开调试工具查看

注意事项

create 方法必须在 devtools 方法之前调用, 否则会报错