3月6日 21:59

如何在 Zustand 中使用中间件？

安装必要的依赖（如果使用 persist 中间件）：

bash
npm install zustand persist
# 或
yarn add zustand persist

在 store 中使用中间件：

javascript
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set, get) => ({
      // 状态
      count: 0,
      user: null,
      
      // 操作状态的方法
      increment: () => set((state) => ({ count: state.count + 1 })),
      decrement: () => set((state) => ({ count: state.count - 1 })),
      setUser: (user) => set({ user }),
      reset: () => set({ count: 0, user: null }),
      
      // 使用 get 获取当前状态
      incrementBy: (value) => set((state) => ({ 
        count: state.count + value 
      }))
    }),
    {
      // persist 配置
      name: 'my-storage', // 存储名称
      storage: localStorage, // 存储方式（默认 localStorage）
      // 可选：部分持久化
      partialize: (state) => ({ user: state.user }),
      // 可选：转换函数
      serialize: (state) => JSON.stringify(state),
      deserialize: (str) => JSON.parse(str)
    }
  )
);

export default useStore;

使用 devtools 中间件：

javascript
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 }))
    }),
    {
      name: 'my-store', // 在 Redux DevTools 中的名称
      enabled: true // 是否启用
    }
  )
);

组合多个中间件：

javascript
import { create } from 'zustand';
import { persist, devtools } from 'zustand/middleware';

const useStore = create(
  devtools(
    persist(
      (set) => ({
        count: 0,
        increment: () => set((state) => ({ count: state.count + 1 }))
      }),
      { name: 'my-storage' }
    ),
    { name: 'my-store' }
  )
);

关键点：

Zustand 中间件通过函数组合的方式使用
persist 中间件可以将状态持久化到 localStorage、sessionStorage 等
devtools 中间件可以在 Redux DevTools 中查看状态变化
中间件的顺序很重要，通常 devtools 在外层，persist 在内层
可以自定义中间件来实现特定的功能

标签：React Zustand