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