在React项目中使用zustand进行状态管理

一、安装依赖

npm install zustand --save

二、创建stores.ts 或 .js文件
 

// stores/dictStore.ts
import { create } from 'zustand';
import { DictType } from '@/types/projectInfoDetail';
import { nanoid } from 'nanoid';

interface DictState {
  // 产品类别列表
  productCategoryDict: DictType[];
  // 运输方式列表
  modeOfTransportDict: DictType[];
  // 支付方式字典
  paymentMethodDict: DictType[];
  // 支付类别字典
  paymentCategoryDict: DictType[];
  // 卖方抬头字典
  sellerTitleDict: DictType[];
  // 项目类别字典
  projectCategoryDict: DictType[];
  // 大洲字典
  continentDict: DictType[];
  // 客户等级字典
  customerLevelDict: DictType[];
  // 客户星级字典
  customerStartDict: DictType[];
  // 内外贸属性字典
  tradeAttributeDict: DictType[];
  // 贸易方式字典
  tradeModeDict: DictType[];
  // 贸易条款字典
  tradeTermsDict: DictType[];
  // 结算币种字典
  settlementCurrencyDict: DictType[];
  // 审批状态字典
  billStatusDict: DictType[];
  // 团队角色字典
  teamRoleDict: DictType[];
  // 客户类别字典
  customerCategoryDict: DictType[];
  // 产修类型字典
  productRepairTypeDict: DictType[];
  // 文件类别字典
  fileCategoryDict: DictType[];

  // 设置方法
  setProductCategoryList: (list: DictType[]) => void;
  setModeOfTransportList: (list: DictType[]) => void;
  setPaymentMethodDict: (list: DictType[]) => void;
  setPaymentCategoryDict: (list: DictType[]) => void;
  setSellerTitles: (titles: DictType[]) => void;
  setProjectCategoryDict: (dict: DictType[]) => void;
  setContinentDict: (dict: DictType[]) => void;
  setCustomerLevelDict: (dict: DictType[]) => void;
  setCustomerStartDict: (dict: DictType[]) => void;
  setTradeAttributeDict: (dict: DictType[]) => void;
  setTradeModeDict: (dict: DictType[]) => void;
  setTradeTermsDict: (dict: DictType[]) => void;
  setSettlementCurrencyDict: (dict: DictType[]) => void;
  setBillStatusDict: (dict: DictType[]) => void;
  setTeamRoleDict: (dict: DictType[]) => void;
  setCustomerCategoryDict: (dict: DictType[]) => void;
  setProductRepairTypeDict: (dict: DictType[]) => void;
  setFileCategoryDict: (dict: DictType[]) => void;
}

export const useDictStore = create<DictState>((set) => ({
  // 初始状态
  productCategoryDict: [],
  modeOfTransportDict: [],
  paymentMethodDict: [],
  paymentCategoryDict: [],
  sellerTitleDict: [],
  projectCategoryDict: [],
  continentDict: [],
  customerLevelDict: [],
  customerStartDict: [],
  tradeAttributeDict: [],
  tradeModeDict: [],
  tradeTermsDict: [],
  settlementCurrencyDict: [],
  billStatusDict: [],
  teamRoleDict: [],
  customerCategoryDict: [],
  productRepairTypeDict: [],
  fileCategoryDict: [],

  // 设置方法实现
  setProductCategoryList: (list) => set({
    productCategoryDict: list.map(item => ({ ...item, key: nanoid(34) }))
  }),
  setModeOfTransportList: (list) => set({
    modeOfTransportDict: list.map(item => ({ ...item, key: nanoid(34) }))
  }),
  setPaymentMethodDict: (list) => set({
    paymentMethodDict: list.map(item => ({ ...item, key: nanoid(34) }))
  }),
  setPaymentCategoryDict: (list) => set({
    paymentCategoryDict: list.map(item => ({ ...item, key: nanoid(34) }))
  }),
  setSellerTitles: (titles) => set({ sellerTitleDict: titles }),
  setProjectCategoryDict: (dict) => set({ projectCategoryDict: dict }),
  setContinentDict: (dict) => set({ continentDict: dict }),
  setCustomerLevelDict: (dict) => set({ customerLevelDict: dict }),
  setCustomerStartDict: (dict) => set({ customerStartDict: dict }),
  setTradeAttributeDict: (dict) => set({ tradeAttributeDict: dict }),
  setTradeModeDict: (dict) => set({ tradeModeDict: dict }),
  setTradeTermsDict: (dict) => set({ tradeTermsDict: dict }),
  setSettlementCurrencyDict: (dict) => set({ settlementCurrencyDict: dict }),
  setBillStatusDict: (dict) => set({ billStatusDict: dict }),
  setTeamRoleDict: (dict) => set({ teamRoleDict: dict }),
  setCustomerCategoryDict: (dict) => set({ customerCategoryDict: dict }),
  setProductRepairTypeDict: (dict) => set({ productRepairTypeDict: dict }),
  setFileCategoryDict: (dict) => set({ fileCategoryDict: dict })
}));