Pinia 实现多组件全局状态共享的关键是单一数据源与响应式绑定：所有组件调用同一 store 函数（如 useFavoriteStore()）获取单例实例，通过 store.state 直接读写触发自动更新，跨路由亦保持同步。
Pinia 实现多组件间全局状态共享和同步，关键在于“单一数据源 + 响应式绑定”。只要所有组件读写的是同一个 store 实例里的 state，Vue 的响应式系统会自动触发更新，无需手动同步。
创建统一的 Store 作为数据中枢
所有需要共享的状态必须定义在同一个 store 中，不能每个组件各建一个同名 store。比如收藏功能，统一用 useFavoriteStore：
- 在 src/stores/useFavoriteStore.js 中定义：
import { defineStore } from 'pinia'<br>export const useFavoriteStore = defineStore('favorite', {<br> state: () => ({<br> list: [], // 所有组件共用这份数组<br> loading: false<br> }),<br> actions: {<br> add(id) { this.list.push(id) },<br> remove(id) { this.list = this.list.filter(i => i !== id) }<br> }<br>)
在任意组件中直接使用同一份实例
每个组件都调用 useFavoriteStore()，Pinia 内部保证返回的是同一个响应式对象（单例）：
- 首页组件：导入并调用，修改 list → 详情页组件立刻响应
- 详情页组件：同样导入并调用，读取 list.length 或监听变化
- 导航栏组件：也可调用 sameStore.list.length 显示收藏数
注意：不是 new useFavoriteStore()，而是直接执行函数调用 —— 这是 Pinia 自动管理实例的关键。
确保响应式更新真正生效
常见问题不是“不共享”，而是“没正确读写响应式字段”：
- ✅ 正确：直接赋值
store.list = newArray或调用store.add(id) - ❌ 错误：用
push等原生方法直接改数组但未用 ref/reactive 包裹（实际不会，因为 state 默认是 reactive） - ⚠️ 注意：如果从 store 解构出属性（如
const { list } = store），会丢失响应性 → 应始终通过store.list访问
跨路由页面也完全一致
Vue Router 页面切换不销毁 store 实例。用户从首页点击收藏，跳转到详情页后：
– 仍调用 useFavoriteStore()
– store.list 已含新 ID，且视图自动刷新
– 不需要路由传参、watch、onActivated 等额外逻辑
