当前位置：首页 > news >正文

Pinia 实战：志愿填报系统全局数据管理核心流程

news 2026/6/15 15:52:53

引言：在多页面串联的业务场景（如志愿填报、表单分步提交）中，全局数据一致性是核心痛点。本文基于 Vue3 + Pinia + TypeScript，以志愿填报系统为例，拆解「定义仓库→数据存取→适配后端」的完整逻辑，新手也能快速上手。

一、核心背景与目标

志愿填报是典型的多页面分步流程（个人信息→院校偏好→地域偏好→提交），需解决：

跨页面数据共享，避免重复传参
数据修改实时响应，页面自动同步
数据类型安全，避免传参错误
快速适配后端接口格式，减少重复代码

Pinia 作为 Vue3 官方状态管理库，天然解决上述问题，以下是落地核心流程。

二、核心流程分步拆解（5步搞定）

步骤1：定义全局唯一 Pinia Store（搭架子）

核心是创建 Store 容器，用响应式+TypeScript 约束数据结构。

关键动作：

通过defineStore定义 Store，指定全局唯一标识（如applicationStrategy）；
用reactive包裹核心数据formData，实现响应式；
通过TFormData接口严格约束字段类型（字段名、层级、数据类型）；
定义setXXX（存数据）、formatForQuickFill（适配后端）等工具方法并暴露。

步骤2：通过 set 方法存储数据（往仓库存）

核心是接收页面数据，通过Object.assign合并到响应式formData。

关键动作：

页面中通过useApplicationStrategyStore()获取 Store 单例（非新建）；
调用对应setXXX方法，传入需要存储的参数（支持部分字段）；
方法内部用Object.assign合并数据，只更新传入字段，不覆盖原有数据；
因formData是响应式对象，数据更新后所有页面自动同步。

页面代码示例：

import { useApplicationStrategyStore } from '@/stores/applicationStrategy' const store = useApplicationStrategyStore() // 存储用户选择的地域偏好 store.setRegionPreference({ likeRegions: ['北京', '上海'] })

步骤3：跨页面读取数据（从仓库取）

核心是直接读取 Store 中的formData，无需重复请求或传参。

关键动作：

目标页面导入 Store 并获取单例；
直接读取formData中需要的字段（响应式，数据变页面自动更）。

页面代码示例：

import { useApplicationStrategyStore } from '@/stores/applicationStrategy' const store = useApplicationStrategyStore() // 读取已保存的地域偏好 const savedLikeRegions = store.formData.regionPreference.likeRegions // 读取学生卡ID const stuCardId = store.formData.personalInfo.stuCardId

步骤4：格式化数据适配后端（打包数据）

核心是在 Store 内部封装格式转换逻辑，避免页面重复代码。

关键动作：

在formatForQuickFill方法中，从formData提取所需字段；
按后端要求处理数据（如数值类型转换、层级调整、空值兜底）；
返回符合后端接口格式的参数对象。

方法代码示例：

const formatForQuickFill = () => { const { personalInfo, regionPreference } = formData return { stuCardId: personalInfo.stuCardId, totalScore: Number(personalInfo.totalScore) || 0, // 数值兜底 likeRegions: regionPreference.likeRegions // 直接提取 } }

步骤5：提交数据到后端（落地数据）

核心是直接使用格式化后的参数调用接口，流程闭环。

页面代码示例：

import { quickFillFormRequest } from '@/service/preferenceForm' const store = useApplicationStrategyStore() // 1. 获取格式化后的参数 const payload = store.formatForQuickFill() // 2. 提交接口 const res = await quickFillFormRequest(payload)