code deep_
创建时间: 2026-03-24最后更新: 2026-03-24

通过如下的方式安装

npm
yarn
1
npm install zustand

1、创建一个 store

我们可以在项目中的任意位置, 创建一个 ts 文件, 用于管理状态, 在该文件中, 首先我们需要引入 zustand, 并利用 create 方法创建一个 store

store.ts
1
import { create } from 'zustand'

create 方法创建的是一个自定义 hook, 因此, 通常情况下, 我们会以 use 作为开头. 我们可以通过它返回基础数据类型、对象、函数等. 如下面的案例所示, 我定义了一个位置信息的状态, 以及一个更新位置信息的方法

store.ts
01
import { create } from 'zustand'

02


03
type Store = {

04
  x: number,

05
  y: number,

06
  update: (event: MouseEvent) => void

07
}

08


09
export const useStore = create<Store>((set) => ({

10
  x: 0,

11
  y: 0,

12
  update: (event: MouseEvent) => set({ 

13
    x: event.pageX,

14
    y: event.pageY

15
  }),

16
}))

17

然后我们可以在任意组件中引入刚才创建好的自定义 hook useStore, 结合 UI 完成案例的完整逻辑, 完整代码以及案例演示如下所示.

预览
鼠标当前位置
0, 0
index.tsx
store.ts
01
import { useEffect } from 'react'

02
import { useStore } from './store'

03


04
export default function Counter() {

05
  const { x, y, update } = useStore()

06


07
  useEffect(() => {

08
    window.addEventListener('mousemove', update)

09
    return () => {

10
      window.removeEventListener('mousemove', update)

11
    }

12
  }, [])

13


14
  return (

15
    <div className='text-center p-4'>

16
      鼠标当前位置

17
      <div className='font-bold text-2xl mt-4'>{x}, {y}</div>

18
    </div>

19
  )

20
}