在 Vue 3 + Pinia 应用中，若直接对 computed(() => store.state.array).value 赋值并操作其结果，会导致失去响应式追踪——组件无法感知后续状态变化，造成 UI 与 Store 数据不一致。
在 vue 3 + pinia 应用中，若直接对 `computed(() => store.state.array).value` 赋值并操作其结果，会导致失去响应式追踪——组件无法感知后续状态变化，造成 ui 与 store 数据不一致。
问题根源在于你当前组件中对 storePricings 的定义方式：
const storePricings = computed(() => reservationStore.currentReservation.pricings as ReservationPricing[] ).value // ❌ 错误：立即取值，破坏响应式链路
.value 将响应式计算属性“固化”为一个普通数组快照，后续 cleanPricings() 虽成功更新了 Store 中的 pricings 数组，但组件内 storePricings 始终引用旧数组，因此 find()、map() 等操作始终作用于过期数据，UI 不会重新渲染。
✅ 正确做法是：保持 computed 的响应式本质，按需解包（而非提前解包）：
// ✅ 正确：storePricings 是一个响应式计算属性
const storePricings = computed(() =>
reservationStore.currentReservation.pricings as ReservationPricing[]
)
// 在函数中使用时，通过 unref() 或 .value 安全访问（仅在需要读取时）
function getPricingQuantity(id: string) {
return unref(storePricings).find(p => p.id === id)?.quantity || 0
}
function increaseReservationPricing(id: string) {
const pricings = unref(storePricings)
const current = pricings.find(p => p.id === id)
if (!current) {
// 注意：直接 push 会触发响应式更新（Vue 3.4+ 支持 proxy 数组 mutation）
reservationStore.currentReservation.pricings.push({ id, quantity: 1 })
} else {
current.quantity += 1
}
}
function decreaseReservationPricing(id: string) {
const pricings = unref(storePricings)
const current = pricings.find(p => p.id === id)
if (current && current.quantity > 0) {
current.quantity -= 1
}
if (current?.quantity === 0) {
reservationStore.cleanPricings() // ✅ 此时 cleanPricings 会触发 store.pricings 重置，computed 自动更新
}
}
⚠️ 补充注意事项：
- cleanPricings 方法中使用 filter() 创建新数组并赋值是安全的（Pinia 默认启用 shallow: false，深度响应式），但建议显式调用 this.$patch 或使用 store.$state 更新以增强可维护性；
- 若需频繁遍历或修改嵌套对象，推荐在 Store 中封装原子操作（如 addPricing(id)、removePricing(id)），避免组件直接操作数组；
- unref() 来自 vue，等价于 isRef(x) ? x.value : x，比手动 .value 更健壮（兼容 ref/computed）；
- 模板中可直接使用 v-for="p in storePricings" —— 因为 computed 本身是响应式引用，Vue 会自动解包。
总结：Pinia + Vue 3 的响应式依赖于持续的依赖追踪链。任何提前 .value、解构赋值或缓存原始数组的行为，都会切断该链路。始终让 computed 保持“活引用”，并在必要时用 unref() 或 toValue() 按需读取，才能确保状态变更精准同步至视图。
