公共数据管理 zustand

使用 zustand 来管理全局状态。

以用户数据举例

src/store/userStore.ts

import {create} from 'zustand'
import {getLocalInfo, setLocalInfo} from '@/utils/localStorage'
import {MENU_TREE, PERMISSIONS, USER} from '@/utils/config.ts'
import {User, type UserDTO} from '@/api/user/types.ts'
import type {PermissionTreeNodeDTO} from '@/api/role/types.ts'

export interface IUserStore {
  userInfo: User
  permissions: string[]
  menuTree: Array<PermissionTreeNodeDTO>
  setUserInfo: (userInfo: UserDTO) => void
  setPermissions: (permissions: string[]) => void
  clearUserInfo: () => void
  setMenuTree: (menuTree: Array<PermissionTreeNodeDTO>) => void
}

export const useUserStore = create<IUserStore>(set => {
  return {
    userInfo: new User(getLocalInfo(USER) as UserDTO),
    permissions: getLocalInfo(PERMISSIONS) || [],
    menuTree: getLocalInfo(MENU_TREE) ?? [],
    setUserInfo: (userInfo: UserDTO) => {
      setLocalInfo(USER, userInfo)
      set({userInfo})
    },
    setPermissions: (permissions: string[]) => {
      setLocalInfo(PERMISSIONS, permissions)
      set({permissions})
    },
    setMenuTree: (menuTree: Array<PermissionTreeNodeDTO>) => {
      setLocalInfo(MENU_TREE, menuTree)
      set({menuTree})
    },
    clearUserInfo: () => {
      setLocalInfo(USER, null)
      set({userInfo: new User()})
    },
  }
})

使用方式

 const {clearUserInfo, userInfo} = useUserStore(state => state)

外部封装(hooks)统一调用

src/hooks/useAppStore.ts

import {usePublicStore} from '@/stores/publicStore'
import {useUserStore} from '@/stores/userStore'

export const useAppStore = () => {
  const userInfo = useUserStore(state => state.userInfo)
  const permissions = useUserStore(state => state.permissions)
  const theme = usePublicStore(state => state.theme)
  const menuCollapsed = usePublicStore(state => state.menuCollapsed)

  return {
    userInfo,
    theme,
    permissions,
    menuCollapsed,
  } as const
}