next项目使用状态管理zustand说明

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

相关推荐
yume_sibai1 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书1 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript
嘗_1 小时前
手写自己的小型react
前端·javascript·react.js
嘀咕博客1 小时前
h5游戏免费下载:HTML5拉杆子过关小游戏
前端·游戏·html5
Moonbit1 小时前
MoonBit 推出 LLVM Debugger,核心用户数破十万
前端·编程语言·llvm
zuo-yiran1 小时前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js
qq_316837751 小时前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js
天天向上10241 小时前
vue3使用ONLYOFFICE 实现在线Word,Excel等文档
前端·javascript·html
KoProject1 小时前
发布30款App之后,我总结了这套GLM-4.6全自动化开发流
前端·后端·github
前端踩bug工程师1 小时前
flutter项目
前端