前端手记（三）：Pinia 状态管理 ——AI 半结构化数据解析与容错处理

所属项目面向全场景用药安全的医师助手 Agent团队ColdX · 山东大学软件学院 2026年春季项目实训个人分工前端开发 界面设计目录一、前言二、为什么选择 Pinia 管理 AI 诊疗数据本项目的 AI 决策链路会返回三类核心数据选择 Pinia 的核心原因三、AI 半结构化数据的核心痛点大模型 Agent 基于自然语言推理生成结果即便约束了 JSON 输出格式仍存在三个不稳定问题四、Pinia Store 设计与防御性解析实现4.1 会诊数据 Storeconsultation.js4.2 UI 状态 StoreuiState.js五、关键技术点大模型数据的前端适配方案六、当前进度总结相关链接一、前言在完成 Axios 网络层封装并与 FastAPI 后端打通基础联调后前端面临一个核心问题大模型 Agent 返回的诊疗数据并非标准化、结构化的固定格式存在字段缺失、嵌套异常、空值等情况。如果直接在组件中裸写数据解析会导致页面崩溃、渲染异常无法满足医疗场景的稳定性要求。本篇将记录我如何使用Pinia完成 AI 半结构化数据的全局状态管理以及针对大模型输出不确定性做的防御性解析与容错设计这也是中期检查前前端核心进度之一。二、为什么选择 Pinia 管理 AI 诊疗数据本项目的 AI 决策链路会返回三类核心数据患者基础信息年龄、性别、过敏史、孕史等药物冲突列表高危禁忌、慎用提醒、配伍风险系统状态码blocked/needs_clarification/fallback这些数据需要在主界面、风险警告组件、追问弹窗、降级医嘱组件中共享传统的 props/emit 会导致层层传递、逻辑混乱。选择 Pinia 的核心原因无繁琐 mutationsaction 可直接修改 state开发效率更高支持模块化拆分可将会诊数据与UI 状态分离职责清晰响应式天然适配 Vue3无需额外配置适合承载大模型输出的非结构化 / 半结构化数据便于统一做容错处理三、AI 半结构化数据的核心痛点大模型 Agent 基于自然语言推理生成结果即便约束了 JSON 输出格式仍存在三个不稳定问题字段缺失部分场景下conflicts、clarification_question等字段为空或不存在类型异常数组类型返回 null字符串类型返回空值嵌套混乱患者信息嵌套层级偶尔变动直接解构会报错医疗场景对前端稳定性要求极高任何解析报错都会导致系统不可用因此必须在状态层做全量兜底。四、Pinia Store 设计与防御性解析实现我将状态拆分为两个独立 Store实现数据与 UI 状态解耦4.1 会诊数据 Storeconsultation.js负责存储 AI 返回的所有诊疗数据所有字段均做防御性赋值避免空值报错。import{defineStore}frompiniaexportconstuseConsultationStoredefineStore(consultation,{state:()({// 患者标签信息防御性默认空对象patientProfile:{},// 药物冲突列表默认空数组避免循环报错conflicts:[],// 后端状态码驱动前端状态机backendStatus:null,// 信息缺失时的追问内容clarificationQuestion:,// 柔性降级时的免责医嘱fallbackAdvice:}),actions:{// 统一处理AI返回数据核心防御性解析processAgentResponse(data){// 空值兜底如果data为空直接重置状态if(!data){this.$reset()return}// 逐字段安全赋值使用 ?? 做空值合并this.backendStatusdata.status??nullthis.conflictsdata.conflicts??[]this.patientProfiledata.patient_profile??{}this.clarificationQuestiondata.clarification_question??this.fallbackAdvicedata.fallback_advice??暂无可用建议},// 重置状态resetConsultation(){this.$reset()}}})4.2 UI 状态 StoreuiState.js独立管理前端加载、弹窗、状态机等 UI 逻辑不与业务数据耦合。import{defineStore}frompiniaexportconstuseUiStateStoredefineStore(uiState,{state:()({isLoading:false,showClarificationModal:false}),actions:{setLoading(status){this.isLoadingstatus},openClarificationModal(){this.showClarificationModaltrue},closeClarificationModal(){this.showClarificationModalfalse}}})五、关键技术点大模型数据的前端适配方案空值合并运算符??替代 ||• ?? 仅在值为null/undefined时兜底不影响0/‘’/false等合法值• 避免医疗场景中年龄为 0、过敏史为无等合法数据被错误覆盖数据类型强制归一化• 数组类型强制兜底[]避免页面v-for渲染报错• 对象类型强制兜底{}避免解构data.key时报undefined错误统一数据入口所有 AI 返回数据仅通过processAgentResponse一个入口进入 Store后续所有组件只读状态不直接修改原始数据便于维护和排查问题。六、当前进度总结本文主要内容完成Pinia 全局状态架构搭建实现 AI 诊疗数据的统一管理落地防御性解析方案解决大模型输出不稳定的前端适配问题实现业务数据与 UI 状态解耦为后续状态机、弹窗、降级功能打下基础联调后端 Agent 接口可正常接收并解析诊疗数据无崩溃问题至此前端网络层→状态层的基建已全部完成下一步将进入核心界面渲染与状态机落地开发为中期检查做好演示准备。相关链接项目地址https://gitee.com/aemond/innovation-training/tree/master团队博客https://blog.csdn.net/curufin/category_13140668.html