Vue3+TypeScript实现状态模式

Vue3+TypeScript实现状态模式：电脑维修状态的动态切换

状态模式（State Pattern）听起来是不是有点像“程序员在电脑维修店里给每台电脑贴了个状态标签”？它是一种行为型设计模式，让对象根据内部状态改变行为，就像电脑从“待诊断”切换到“维修中”再到“已修好”。今天我们用Vue3和TypeScript，结合一个“电脑维修状态”的幽默例子，带你搞懂状态模式如何优雅地管理状态切换，代码简洁又好玩，保证通俗易懂，笑中带学！

一、状态模式是什么？

想象你经营一家电脑维修店，客户送来一台坏电脑，维修流程可能经历“待诊断”、“维修中”、“已修好”等状态。每个状态下，电脑的处理方式不同：待诊断时检查问题，维修中时换零件，已修好时通知客户。状态模式就像你的“状态管理器”：把每种状态封装成独立类，根据状态切换行为，代码清晰又灵活，避免一堆if-else乱七八糟！

核心角色：

• 环境角色（Context）：电脑维修单，持有当前状态并触发行为。
• 抽象状态角色（State）：定义状态的行为接口。
• 具体状态角色（Concrete State）：实现具体状态下的行为逻辑。

我们用Vue3+TypeScript实现一个前端版的“电脑维修状态切换系统”，让你边修电脑边学状态模式！

二、代码实现

1. 抽象状态角色

// src/states/RepairState.ts
import { ComputerRepair } from './ComputerRepair';export abstract class RepairState {protected repair: ComputerRepair | null = null;setRepair(repair: ComputerRepair): void {this.repair = repair;}abstract process(): string;
}

幽默讲解：RepairState是“维修状态的工牌”，规定每种状态必须能处理维修（process），还能绑定维修单（setRepair）。就像店里贴个标签：“这台电脑现在啥情况？”

2. 具体状态角色

// src/states/PendingDiagnosisState.ts
import { RepairState } from './RepairState';
import { RepairingState } from './RepairingState'