usehook - 前端码易

通过如下的方式安装

npm

yarn

npm install zustand

1、创建一个 store

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

store.ts

import { create } from 'zustand'

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

store.ts

10import { create } from 'zustand'
20
30type Store = {
40  x: number,
50  y: number,
60  update: (event: MouseEvent) => void
70}
80
90export 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 完成案例的完整逻辑，完整代码以及案例演示如下所示。

预览

index.tsx

store.ts

10import { useEffect } from 'react'
20import { useStore } from './store'
30
40export default function Counter() {
50  const { x, y, update } = useStore()
60
70  useEffect(() => {
80    window.addEventListener('mousemove', update)
90    return () => {
10      window.removeEventListener('mousemove', update)
11    }
12  }, [])
13
14  return (
15    <div className='text-center'>
16      鼠标当前位置
17      <div className='font-bold text-2xl mt-4'>{x}, {y}</div>
18    </div>
19  )
20}

0、介绍

2、create

专栏首页

到顶

专栏目录