20、前端开发：Stimulus 状态管理与 DOM 操作实践

前端开发：Stimulus 状态管理与 DOM 操作实践

1. 音乐会应用的数据更新与显示

在音乐会应用开发中，为实现实时数据更新和显示，进行了三项关键更改：
1. 新增接口 ：在文件顶部创建了 ConcertRemainingData 接口，包含 concertId 和 ticketsRemaining 信息。虽然并非必需，但 TypeScript 能借此更好地处理数据。
2. 订阅调整 ： createSubscription 方法微调，接收数据时期望 concerts 作为传入 JSON 的顶级键。
3. 数据更新 ： updateData 方法更新，遍历数据中的每个条目，检查所有音乐会目标，若 ID 匹配，则更新元素数据集中的剩余票数和售罄信息。为提升性能，可对 concertTargets 进行索引，但目前并非关键问题。

为确保显示实时更新，还需更改 Stimulus ConcertController 中监视剩余票数的方法：

import { Controller } from "@hotwired/stimulus"
export default class ConcertController extends Contr