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

1024小神2025-10-10 11:24

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

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