lmes-web-base 状态管理方案详细文档

目录

1. 简介
2. 项目结构概览
3. 核心状态管理架构
4. Store.ts 状态容器详解
5. State.ts 响应式状态系统
6. globalState.ts 全局状态管理
7. 组件间状态传递机制
8. 状态持久化策略
9. 性能优化与开发建议
10. 错误处理与调试
11. 总结

简介

lmes-web-base 采用了一套基于 Vue 3 Composition API 和自定义 Store 模块的全局状态管理方案。该方案通过响应式状态系统、provide/inject 机制和模块化设计，为复杂的 MES（制造执行系统）应用提供了高效、可维护的状态管理解决方案。

该状态管理方案的核心特点包括：

• 基于 Vue 3 响应式系统的现代状态管理
• 模块化的状态组织方式
• 支持状态持久化和跨页面数据共享
• 高效的组件间状态传递机制
• 完善的性能优化策略

项目结构概览

图表来源

• src/libs/Store/Store.ts
• src/libs/Store/State.ts
• src/libs/Store/globalState.ts

核心状态管理架构

lmes-web-base 的状态管理架构采用了分层设计，从底层的响应式基础到顶层的业务组件，形成了完整的状态管理体系。

图表来源

• src/libs/Store/Store.ts
• src/libs/Store/State.ts
• src/libs/Store/globalState.ts

章节来源

• src/libs/Store/Store.ts
• src/libs/Store/State.ts
• src/libs/Store/globalState.ts

Store.ts 状态容器详解

Store.ts 是整个状态管理方案的核心，它负责创建全局状态容器、管理状态生命周期以及提供状态访问接口。

状态容器初始化

// 基础状态生成器
const baseDataGenerate = (key?: BaseKeyEnum) => {
  const data: BaseState = {
    systemConfig: { state: ref({}) },
    workSectionList: { state: ref([]) },
    featureList: { state: ref([]) },
    featureMap: { state: ref({}) },
  }
  return key ? data[key] : data
}

全局状态钩子函数

export const useGlobalState = createGlobalState<{
  systemConfig: StateRef
  workSectionList: StateRef
  featureList: StateRef
  productionLineList: StateRef
  hasProductionLine: Ref<boolean>
  getSystemConfig: () => Promise<any>
  getWorkSectionList: (segmentId?: string) => Promise<any>
}>()

异步状态初始化流程

图表来源

• src/libs/Store/Store.ts

状态更新机制

Store.ts 实现了完善的异步状态更新机制，支持多种数据源的初始化和更新：

1. 系统配置初始化：通过 getSystemConfig() 方法获取系统配置
2. 功能特性列表：通过 getFeatureList() 方法获取功能特性
3. 工序段数据：通过 getProductList() 方法获取产品列表
4. 工位列表：通过 getWorkStationList() 方法获取工位信息

章节来源

• src/libs/Store/Store.ts

State.ts 响应式状态系统

State.ts 提供了一个轻量级的本地状态管理系统，专门用于处理组件内部的状态持久化需求。

本地状态持久化

// 状态键名
const StateKey = Symbol('state').toString()

// 从localStorage恢复状态
const stateStr = localStorage.getItem(StateKey) || '{}'
let initValue = {}
try {
  initValue = JSON.parse(stateStr)
} catch (error) {
  console.error(error)
}

// 响应式状态
export const state = ref<Record<string, any>>(initValue)

自动状态持久化

// 监听状态变化并自动保存到localStorage
watch(
  state,
  (v) => {
    if (Object.keys(state.value).length) {
      localStorage.setItem(StateKey, JSON.stringify(v))
    }
  },
  { deep: true }
)

组件状态提供注入模式

图表来源

• src/components/Table/state.ts

章节来源

• src/libs/Store/State.ts
• src/components/Table/state.ts

globalState.ts 全局状态管理

globalState.ts 提供了一个简单的全局响应式状态容器，作为 Store.ts 的补充，用于处理不需要复杂逻辑的简单状态。

全局状态容器

import { reactive, onMounted, ref, Ref } from 'vue'

export const globalState = reactive({})

虽然实现简单，但 globalState 在以下场景中发挥重要作用：

• 临时状态存储
• 跨组件的简单数据共享
• 作为 Store.ts 的备用状态容器

与 Store.ts 的协作关系

图表来源

• src/libs/Store/globalState.ts

章节来源

• src/libs/Store/globalState.ts

组件间状态传递机制

lmes-web-base 采用 Vue 3 的 provide/inject 机制结合自定义状态管理，实现了高效的组件间状态传递。

BaseTable 状态管理模式

// 状态提供者
export const createState = (props: TablePropsItemType, ctx: SetupContext) => {
  store = useStore(props, ctx)
  provide(KEY, store)
  return store as StoreType
}

// 状态消费者
export const injectState = () => {
  const injectStore = inject(KEY, '')
  if (!injectStore) {
    return store as StoreType
  }
  return inject(KEY) as StoreType
}

状态传递流程

图表来源

• src/components/BaseTable/useState.ts

实际使用示例

在 ConsoleManagement 组件中使用全局状态：

// Header.tsx 中的使用示例
const { systemConfig } = useGlobalState()
const hasProduct = computed(() => {
  return systemConfig.state.value?.ProductionLineStructure == 1
})

在 OrderManagement 组件中使用全局状态：

// PlanSegmentDialog.tsx 中的使用示例
const { getProductList, productionLineList } = useGlobalState()
const onOpen = async () => {
  getProductList()
  // 其他初始化逻辑
}

章节来源

• src/components/BaseTable/useState.ts
• src/widgets/ConsoleManagement/Views/Components/Header/Header.tsx
• src/widgets/OrderManagement/components/PlanSegmentDialog/PlanSegmentDialog.tsx

状态持久化策略

lmes-web-base 实现了多层次的状态持久化策略，确保用户数据在页面刷新后仍然可用。

本地存储策略

// storage.ts 提供的存储工具
const Local = {
  set(key: string, val: any) {
    window.localStorage.setItem(key, JSON.stringify(val))
  },
  get(key: string) {
    const value: null | string = window.localStorage.getItem(key) || null
    if (!value) return null
    return JSON.parse(value)
  },
  remove(key: string) {
    window.localStorage.removeItem(key)
  },
  clear() {
    window.localStorage.clear()
  },
}

const Session = {
  set(key: string, val: any) {
    window.sessionStorage.setItem(key, JSON.stringify(val))
  },
  get(key: string) {
    const value: null | string = window.sessionStorage.getItem(key)
    try {
      if (!value) return null
      return JSON.parse(value)
    } catch (error) {
      return value
    }
  },
  remove(key: string) {
    window.sessionStorage.removeItem(key)
  },
  clear() {
    window.sessionStorage.clear()
  },
}

状态持久化流程

图表来源

• src/libs/Store/State.ts
• src/utils/storage.ts

持久化开发建议

1. 选择合适的存储方式：

   • localStorage：适合长期存储的配置信息
   • sessionStorage：适合临时会话数据
   • 内存状态：适合临时计算结果

2. 数据序列化策略：

   • 使用 JSON.stringify 进行序列化
   • 处理循环引用问题
   • 优化存储空间

3. 版本兼容性：

   • 添加数据格式版本号
   • 实现数据迁移逻辑
   • 处理数据格式变更

章节来源

• src/utils/storage.ts

性能优化与开发建议

lmes-web-base 的状态管理方案在性能优化方面采用了多种策略，确保在大型应用中的高效运行。

计算属性优化

// 使用computed优化条件判断
const hasProductionLine = computed(() => {
  const state: Ref<any> = systemConfig.state
  const structure = state.value.ProductionLineStructure
  return structure == 1
})

// 使用computed优化数据转换
const dataSourceMap = computed(() => {
  const map = new Map<string, any>()
  for (const item of dataSource.value) {
    map.set(item[rowId.value], item)
  }
  return map
})

异步操作优化

// 防抖处理防止频繁请求
const getSystemConfig = async (checked: boolean = false) => {
  const fn = async () => {
    const data = await getFormDataBySettings()
    systemConfig.state.value = data || config
  }
  
  // 使用setTimeout避免重复请求
  return new Promise<void>((resolve) => {
    const getConfig = async () => {
      const condition = systemSetTimeT !== oldSystemSetTimeT && !checked
      oldSystemSetTimeT = systemSetTimeT
      if (condition) {
        await handleCheckedState()
        resolve()
      } else {
        await awaitInitLoading()
        resolve()
      }
      systemSetTimeT && clearTimeout(systemSetTimeT)
    }
    systemSetTimeT = setTimeout(getConfig, 100)
  })
}

内存管理优化

开发建议

1. 状态粒度控制：

   • 避免过度细分状态
   • 合理划分状态边界
   • 使用复合状态减少嵌套

2. 计算属性使用：

   • 利用computed缓存计算结果
   • 避免在模板中直接调用复杂函数
   • 合理使用依赖追踪

3. 异步操作管理：

   • 使用防抖和节流
   • 实现请求去重
   • 添加超时和重试机制

章节来源

• src/libs/Store/Store.ts

错误处理与调试

lmes-web-base 实现了完善的错误处理机制和调试工具集成，确保系统的稳定性和可维护性。

错误处理策略

// 异常捕获和处理
const getWorkSectionList = async (segmentId?: string) => {
  const params: Record<string, any> = {
    MaxResultCount: 999,
    SkipCount: 0,
  }
  if (segmentId) {
    params.Segment = segmentId
  }
  try {
    const res = await getWorkSectionApi(params)
    const items = res.items.map((v) => {
      return {
        label: v.name,
        value: v.id,
        workSectionCode: v.code,
        source: { ...v },
      }
    })
    if (!segmentId) {
      workSectionList.state.value = items || []
    }
    return items
  } catch (error) {
    console.error('获取工序列表失败:', error)
    return []
  }
}

状态调试工具

错误边界处理

1. API 调用错误处理：

   • 捕获网络异常
   • 处理服务器错误
   • 提供友好的错误提示

2. 状态更新错误处理：

   • 验证数据格式
   • 处理数据转换异常
   • 实现状态回滚机制

3. 组件渲染错误处理：

   • 使用ErrorBoundary包装组件
   • 提供降级UI
   • 记录错误日志

调试开发建议

1. 开发环境调试：

   • 使用Vue DevTools监控状态变化
   • 启用详细的错误堆栈信息
   • 实现状态快照功能

2. 生产环境监控：

   • 实现错误上报机制
   • 监控关键状态指标
   • 提供状态恢复功能

章节来源

• src/libs/Store/Store.ts

总结

lmes-web-base 的状态管理方案是一个设计精良、功能完备的状态管理系统，具有以下核心优势：

技术特点

1. 现代化架构：基于 Vue 3 Composition API 和响应式系统
2. 模块化设计：清晰的状态层次结构和职责分离
3. 性能优化：多层次的性能优化策略和缓存机制
4. 可维护性：完善的错误处理和调试工具支持

应用价值

1. 复杂业务场景支持：适用于 MES 系统的复杂业务需求
2. 跨组件数据共享：高效的组件间状态传递机制
3. 状态持久化：可靠的本地存储和数据恢复能力
4. 开发效率提升：标准化的状态管理流程和工具

发展方向

1. 状态管理工具增强：增加调试和监控工具
2. 性能持续优化：进一步优化大型应用的性能表现
3. 类型安全加强：完善 TypeScript 类型定义和验证
4. 生态扩展：支持更多第三方状态管理库的集成