zustand

安装

yarn add zustand

案例

制作文件 src/store/index.ts，全部代码如下

import { create } from 'zustand'

/**
 * 1. create 后面通过泛型声明类型，是为了使用者可通过点调用属性、方法时有提示
 * 2. 后面的 set 方法体使用了立即执行函数返回一个对象，其中有属性也有函数
 * 3. 函数用来更新状态中的属性
 */
export const useMenuStore = create<{
  menuTree: MyType.MenuItem[] | null
  menuArr: MyType.MenuItem[] | null
  updateMenuTree: (menuTree: MyType.MenuItem[]) => void
  updateMenuArr: (menuArr: MyType.MenuItem[]) => void
}>(set => ({
  menuTree: null,
  menuArr: null,
  updateMenuTree: (menuTree: MyType.MenuItem[]) => set({ menuTree }),
  updateMenuArr: (menuArr: MyType.MenuItem[]) => set({ menuArr })
}))

调用者的使用方法

import { useMenuStore } from '@/store'
const menuStore = useMenuStore()
menuStore.updateMenuTree(menuItemList)

也可以明确只使用其中一个状态

import { useMenuStore } from '@/store'
const menuTree = useMenuStore(state => state.menuTree)
// 在 JSX 中使用 menuTree

该案例见 https://gitee.com/chanchaw/reat-manager/tree/mytools