在组件中使用 Pinia 需先安装并挂载 store，再通过 useStore 引入；store 响应式，可直接访问 state 字段或 getters，无需 ref/reactive 包裹，且须在 setup 内调用。
在组件中使用 Pinia，需要先确保已正确安装并创建了 store，然后通过 useStore 组合函数引入并读取状态。
1. 确保 store 已正确定义并挂载
Pinia 需要在应用启动时被安装到 Vue 实例上。通常在 main.js 或 main.ts 中完成：
- 调用
createPinia()创建 pinia 实例 - 通过
app.use(pinia)挂载到应用 - store 文件一般放在
src/stores/目录下（如counter.js或counter.ts）
2. 在组件中引入并使用 store
以定义好的 useCounterStore 为例（文件路径如 src/stores/counter.js）：
- 在组件脚本中导入：
import { useCounterStore } from '@/stores/counter' - 在
setup()中调用：const counter = useCounterStore() - 直接访问其响应式属性，例如
counter.count、counter.name
注意：store 是响应式的，无需额外用 ref 或 reactive 包裹，直接在模板中使用即可（如 {{ counter.count }}）。
3. 读取状态的常见方式
状态读取分两种典型场景：
-
直接读取：对
state中的普通响应式字段（如count: ref(0)或count: 0），直接store.count -
通过 getter 读取：若在 store 中定义了
getters（如doubleCount: (state) => state.count * 2），则用store.doubleCount，它会自动响应式更新
4. 注意事项
避免在 setup 外部直接调用 store（如在 data 选项或非组合式 API 中），否则可能触发警告或失去响应性。
如果使用 TypeScript，建议为 store 显式标注类型（如 const counter = useCounterStore() as CounterStore），但通常通过 defineStore 的泛型已自动推导。
