Pinia 的 getters 适合声明式计算多步骤表单进度，通过布尔字段标记各步完成状态，并在 getter 中聚合统计已完成数、计算百分比及当前步骤；支持动态步骤与条件分支。
Pinia 的 getters 非常适合用来声明式地计算多步骤表单的当前进度，核心思路是：把各步骤的完成状态抽象为布尔值或数值，再用 getter 聚合判断，自动响应变化。
用布尔字段标记每步完成状态
在 store 中为每个表单步骤定义明确的完成标识（如 step1Completed、step2Completed），这些字段通常由组件中校验通过后手动设置，或通过 computed + watch 自动更新：
- 用户填完姓名邮箱 → 触发
updateStep1({ name, email })→ 校验通过则state.step1Completed = true - 地址表单项全部有效 →
state.step2Completed = !!state.address && !!state.city - 避免在 getter 内做副作用（如发起请求、修改 state），只做纯计算
用 getter 汇总完成数并计算百分比
直接在 store 中定义一个 getter，统计已完成步骤数，再换算成进度值：
export const useFormStore = defineStore('form', {
state: () => ({
step1Completed: false,
step2Completed: false,
step3Completed: false,
step4Completed: false,
}),
getters: {
completedSteps(): number {
return [
this.step1Completed,
this.step2Completed,
this.step3Completed,
this.step4Completed
].filter(Boolean).length;
},
progressPercentage(): number {
return Math.round((this.completedSteps / 4) * 100);
},
currentStep(): number {
// 返回第一个未完成的步骤序号（1-indexed）
const steps = [this.step1Completed, this.step2Completed, this.step3Completed, this.step4Completed];
return steps.findIndex(v => !v) + 1 || 4;
}
}
});
在组件中响应式使用进度信息
组件里直接读取 getter，无需额外监听或计算：
- 模板中写
{{ formStore.progressPercentage }}%，会随任意 step 字段变化自动更新 - 结合
v-if控制步骤面板： - 进度条组件传入
:value="formStore.progressPercentage"即可实时渲染
进阶：支持动态步骤数或条件分支
如果步骤不是固定 4 步，或某些步骤是否显示取决于前序选择（如“是否需要发票”控制第 3 步），可在 getter 中引入逻辑：
- 用
computed动态生成步骤数组（含条件过滤），再统计长度 - 将“是否启用某步骤”也作为 state 字段（如
showInvoiceStep: boolean），在 getter 中参与判断 - 示例：
const actualSteps = [true, true, this.showInvoiceStep, true]→ 基于它算进度
