【状态管理】zustand 中文文档，它来了！！！

AwesomeDevin

墨衍会员 · AI 创作全网分发码龄10年

关注

原创最新推荐文章于 2026-09-02 11:09:20 发布 6.8k 阅读 AI 写同款· GEO 优化 ›

限时加码！20+主流AI编程工具免费用购周边加赠Coding Plan Lite，Claude Code、Cursor等即刻畅享，学习进阶更高效！阅读详情

如果有兴趣了解更多用法及 api ，点击此处解锁中文文档

前言

是不是觉得 Redux 很难用？想用 Context 代替，但是你知道吗，Context 也有个很大的缺点：

context value发生变化时，所有用到这个context的组件都会被重新渲染，即使 component 需要的 state 可能根本沒有变动。基于 context 维护的模块越多，影响范围越大, 某些情况下会导致页面明显卡顿。
另外，它依赖 Context Provider 包裹你的应用程序。

那么试试 zustand 吧，当然你可以选择 mobx，
zustand 与 mobx 最大的差别在于：

zustand 的状态更新遵循 react 思想，采用自然不可变更新, 而 mobx 类似 vue，基于数据劫持直接修改状态本身。
体现在开发层面最直观的差异就是：
- zustand 状态更新，新状态覆盖旧状态
```
state = {a: 1}

update(){
  stae = {a: 2} 
}
```
- mobx 状态更新，直接修改属性值
```
state = {a: 1}

update(){
  stae.a++
}
```

React 三部曲

Step 1: 安装

npm install zustand # or yarn add zustand

Step 2: Store 初始化

创建的 store 是一个 hook，你可以放任何东西到里面：基础变量，对象、函数，状态必须不可改变地更新，set 函数合并状态以实现状态更新。

import { create } from 'zustand'

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

Step 3: Store 绑定组件，就完成了!

可以在任何地方使用钩子，不需要提供 provider。
基于 selector 获取您的目标状态，组件将在状态更改时重新渲染。

选择目标状态：bears

function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

更新目标状态：bears

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

Vue 三部曲

什么，你还想试试在 Vue 中使用？那么 Step1 与 Step2 基本一致，不同的是 Step3 (Store 绑定组件)：

Step 1: 安装

npm install zustand-vue # or yarn add zustand-vue

Step 2: Store 初始化

创建的 store 是一个 hook，你可以放任何东西到里面：基础变量，对象、函数，状态必须不可改变地更新，set 函数合并状态以实现状态更新。

import create from "zustand-vue";

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

export default useBearStore

Step 3: Store 绑定组件，就完成了!

基于 selector 获取您的目标状态，组件将在状态更改时重新渲染。

Store 绑定组件在 vue3 与 vue2 中有所不同。

<template>
  <div>store.bears: {{ bears }}</div>
  <button @click="increasePopulation">increasePopulation</button>
  <button @click="removeAllBears">removeAllBears</button>
</template>

<script>
import useBearStore from "./store";

const increasePopulation = useBearStore((state) => state.increasePopulation);
const removeAllBears = useBearStore((state) => state.removeAllBears);

export default {
  data() {
    return {
      store: useBearStore(),
      bears: useBearStore((state) => state.bears),
    };
  },
  methods: {
    increasePopulation,
    removeAllBears,
  },
};