Skip to content

useGlobalData

用于管理全局数据,包括用户信息、权限信息等。

前置条件

该hooks依赖于GlobalContext,需要先下载 GlobalContext 文件至src/context文件夹中。

下载useGlobalData.ts文件,并将文件放入src/hooks文件夹下。

src/hooks/index.ts写入以下代码

tsx
export * from './useGlobalData';

基础实用

src/App.tsx

tsx
import { GlobalProvider } from '@/context/GlobalContext'
import { Home } from '@/pages';

function App() {
    <GlobalProvider>
      <Home />
    </GlobalProvider>
}

src/pages/Home.tsx

tsx
import { useGlobalData } from '@/hooks';

export const Home = () => {
    const { dispatch, globalData } = useGlobalData();

    const handleSetUsername = (name: string) => {
        dispatch({ type: 'set', key: 'username', value: name })
    }

    return (
        <div>
            <h1>Hello, {globalData.username}</h1>
            <button onClick={() => handleSetUsername('John Doe')}>Change Name</button>
        </div>
    )
}