示例 15：Pinia —— 两个组件共享同一个 store

一份状态，两个「页面」同时看见

下面两个面板是各自独立的组件，它们都调用了 useCartStore()——拿到的是同一个 store 实例。在任意一边改数据，另一边立刻跟着变，这就是状态管理库解决的那个问题。

[迷你控制台] Pinia / Vue 开发版的警告会显示在这里

第二块：解构 store 会丢响应性（本章最经典的坑）

✗ const { count } = store（普通解构）

解构出来的值：-

✓ const { count } = storeToRefs(store)

ref 里的值：-

import { storeToRefs } from 'pinia'
const store = useCartStore()
const { count } = store                 // ✗ 拿到的是当时的快照，之后不再更新
const { count } = storeToRefs(store)    // ✓ 拿到的是 ref，读写都用 .value
const { add } = store                   // ✓ 动作（action）本来就可以直接解构

附：常用 API

写法	作用
`store.count`	读写状态（模板里直接用，自动解包）
`storeToRefs(store)`	解构状态时保住响应性
`store.$patch({ items: [] })`	批量修改，devtools 里合成一条记录
`store.$reset()`	重置（setup store 需自己写）
`store.$subscribe(fn)`	订阅变化，持久化的地基