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