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 })),
}));

CSS

JavaScript

zustand

使用

持久化存储

TypeScript 支持