zustand
约 456 字大约 2 分钟
2026-01-15
zustand 是一个小巧、快速且可扩展的极简状态管理解决方案。易学易用,但又不简单是它的最大特点。
使用
- 安装
npm install zustand- 使用
create创建一个存储
import { create } from "zustand";
const useBear = create((set) => ({
bears: 0,
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
updateBears: (newBears) => set({ bears: newBears }),
}));上面是官网的例子,在 set() 函数中使用一个回调,然后使用 state 参数来获取当前状态,并返回新的状态。下面是另一种写法:
const useStore =
create <
StoreState2 >
((set, get) => ({
bears: 0,
increasePopulation: () => set({ bears: get().bears + 1 }),
removeAllBears: () => set({ bears: 0 }),
updateBears: (newBears) => set({ bears: newBears }),
}));create 函数接受一个回调函数,这个回调函可以接收两个参数:set 和 get。set 是一个函数,用于更新状态。get 是一个函数,用于获取最新状态。
- 使用存储
可以在任何地方导入 useStore 函数,并使用它来获取和设置状态。
import { useStore } from "./store";
function BearCounter() {
const bears = useStore((state) => state.bears);
// 解构使用: const { bears } = useStore()
return <h1>{bears} bears around here...</h1>;
}持久化存储
zustand 默认情况下,状态是临时的,当页面刷新时,状态会丢失。要实现持久化存储,需要使用 persist 中间件。persist 接收两个参数:回调函数和配置对象。
import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";
export const useBearStore = create()(
persist(
(set, get) => ({
bears: 0,
addABear: () => set({ bears: get().bears + 1 }),
}),
{
name: "food-storage", // 配置对象中的必填项,且必须唯一,将作为键存储状态
storage: createJSONStorage(() => localStorage),
},
),
);TypeScript 支持
在 TypeScript 中,creat() 函数需要注解一个状态类型 create<StoreState>,StoreState 是一个对象,包含状态属性和设置状态的方法。
import { create } from "zustand";
interface BearState {
bears: number;
increase: (by: number) => void;
}
const useBearStore = create<BearState>()((set) => ({
bears: 0,
increase: (by) => set((state) => ({ bears: state.bears + by })),
}));