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

相关推荐
Asort7 小时前
JavaScript设计模式(八):组合模式(Composite)——构建灵活可扩展的树形对象结构
前端·javascript·设计模式
刘永胜是我7 小时前
【iTerm2 实用技巧】解决两大顽疾:历史记录看不全 & 鼠标滚轮失灵
前端·iterm
returnfalse7 小时前
🔥 解密StreamParser:让数据流解析变得如此优雅!
前端
凉城a7 小时前
经常看到的IPv4、IPv6到底是什么?
前端·后端·tcp/ip
jserTang7 小时前
Cursor Plan Mode:AI 终于知道先想后做了
前端·后端·cursor
木觞清7 小时前
喜马拉雅音频链接逆向实战
开发语言·前端·javascript
一枚前端小能手7 小时前
「周更第6期」实用JS库推荐:InversifyJS
前端·javascript
Hilaku7 小时前
"事件委托"这个老古董,在现代React/Vue里还有用武之地吗?
前端·javascript·vue.js
前端缘梦7 小时前
Webpack 5 核心升级指南:从配置优化到性能提升的完整实践
前端·面试·webpack