大家好,我是1024小神,技术群 / 私活群 / 股票群 或 交朋友 都可以私信我。 如果你觉得本文有用,一键三连 (点赞、评论、关注),就是对我最大的支持~

开源地址:github.com/pmndrs/zust...
Zustand(在德语中意为"状态")是一个轻量、快速、可扩展的 React 状态管理库。它基于 Hooks API,并且非常灵活,不需要像 Redux 那样定义复杂的 Action、Reducer、Store 组合等模板代码,却仍然保留了单向数据流、不可变数据等良好的状态管理理念。如果你之前使用过vue的pinia,那你使用Zustand就会显得很熟悉。

安装依赖:
pnpm install zustand
创建一个store,里面可以添加状态和函数,还可以加上devtools,用于在浏览器中调试:

示例代码:
javascript
import { create } from 'zustand'
import { persist, devtools } from 'zustand/middleware'
const useUserStore = create(
// 使用 devtools 包裹
devtools(
// 使用 persist 包裹
persist(
(set) => ({
user: false,
setUser: (user: boolean) => set({ user }),
status: 'loading' as 'loading' | 'success' | 'error',
setStatus: (status: 'loading' | 'success' | 'error') =>
set({ status }),
}),
{
// persist 的配置
name: 'user-store', // localStorage 中的 key
// storage: createJSONStorage(() => sessionStorage), // 可以指定 storage 类型
}
),
{
// devtools 的配置
name: 'UserStore', // DevTools 中显示的名称
}
)
)
export default useUserStore
在组件中使用:

然后就可以调用各种函数:appStore.setApp(true)
同时配合浏览器插件来调试状态:Redux DevTools

然后启动项目后,在浏览器中就可以看到调试:如果有多个store,可以点击这里切换不同的store,然后在下方就可以看到不同的数据
大家好,我是1024小神,技术群 / 私活群 / 股票群 或 交朋友 都可以私信我。 如果你觉得本文有用,一键三连 (点赞、评论、关注),就是对我最大的支持~