介绍
zustand 是一个小巧的状态管理库，它使用了 React Hooks API，让你可以轻松地将状态集成到你的 React 应用中。
安装
npm install zustand
用法
第一步，你需要创建一个 store，它是一个包含状态和状态更新函数的对象。
// src/store/useUserInfo.ts
import { create } from 'zustand';
type UserInfo = {
id: string;
name: string;
/** 余额(分) */
balance: number;
registerTime: string;
};
type UserStore = {
userInfo?: UserInfo;
setUserInfo: (userInfo: UserInfo) => void;
getBanlanceYuan: () => string | undefined;
};
const useUserStore = create<UserStore>((set, get) => ({
userInfo: undefined,
// 设置用户信息
setUserInfo: (userInfo: UserInfo) => set({ userInfo }),
// 获取用户余额(元), 类似于 vue computed
getBanlanceYuan: () => {
const balance = get().userInfo?.balance;
if (balance === undefined) return;
return (balance / 100).toFixed(2) + '元';
},
}));
// 设置用户信息(也可以用 setState 更新 state)
export const setUserInfo = (userInfo: UserInfo) => {
useUserStore.setState({ userInfo });
};
export default useUserStore;
第二步，你可以使用 useUserStore hook 来订阅状态、更新状态。
// src/pages/Home/index.tsx
import useUserStore from '@/store/useUserStore';
import React from 'react';
const Home = () => {
const { userInfo, setUserInfo, getBanlanceYuan } = useUserStore((state) => state);
return (
<div>
<h1>Home</h1>
<div>
<ul>
<li>用户ID: {userInfo?.id}</li>
<li>用户名: {userInfo?.name}</li>
<li>余额: {getBanlanceYuan()}</li>
<li>注册时间: {userInfo?.registerTime}</li>
</ul>
<button
onClick={() =>
setUserInfo({
id: '1',
name: '张三',
balance: 10000,
registerTime: '2023-12-10 10:43:16',
})
}
>
设置用户信息
</button>
</div>
</div>
);
};
export default Home;
注意事项
set 不仅可以接受一个对象，还可以接受一个函数，这个函数接受一个参数，这个参数是当前的状态，返回一个新的状态。
- 当
set接受一个对象时，它会将这个对象与当前的状态进行合并，所以你可以只更新你想要更新的状态。 - 当
set接受一个函数时，它会将这个函数的返回值也会与当前的状态进行合并，只更新你想要更新的状态。
setUserInfo: (userInfo: UserInfo) => set({ userInfo }),// { userInfo } 会与 state 进行合并作为新的 state
setUserInfo: (userInfo: UserInfo) => set(state=>{
return { userInfo } // { userInfo } 会与 state 进行合并作为新的 state
})
