Vue全局状态适合管理跨组件复用、需响应式同步、支持持久化或动态切换的配置，如主题色、语言、布局开关、分页大小等；局部状态如搜索词、弹窗显隐应保留在组件内。
Vue 全局状态用于集中管理那些多个组件共同依赖、需要统一控制的配置型数据，比如主题色、语言、侧边栏折叠状态、表单默认校验规则、表格分页大小等。这类配置通常不频繁变动，但一旦变化，需立即同步到所有相关组件，且支持按需启用或覆盖。
哪些配置适合走全局状态？
不是所有配置都要放进 store。关键看三点：是否跨组件复用、是否需响应式同步、是否需持久化或运行时动态切换。
- 适合放全局的：系统主题（dark/light）、当前语言 locale、布局开关（如 menuCollapse、showBreadcrumb）、默认分页 size（10/20/50）、表单提交前的全局校验策略（如空值是否跳过）
- 不适合放全局的：某个列表页的搜索关键词、弹窗的 visible 状态、编辑表单的临时草稿 —— 这些属于局部视图状态，应保留在组件 data 或 setup() 中
如何实现“按需配置”而非“一刀切”？
核心是把配置拆成“基础默认值 + 组件级覆盖”，避免全局状态强制所有组件服从同一套规则。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 在 store 中定义可读写的配置对象，例如：
layout: { menuCollapse: false, theme: 'light', pageSize: 10 } - 组件内通过
computed或useStore读取，但不直接绑定 DOM；而是封装一个组合函数，如useTableConfig()，内部优先检查组件 props 是否传了pageSize，有则用 props，否则 fallback 到 store - 对关键配置提供“作用域开关”，比如
isGlobalThemeEnabled: true，组件可主动关闭继承，改用本地 theme 值
配置变更如何精准通知目标组件？
避免全量重渲染。Pinia 支持按字段订阅，推荐两种轻量方式：
立即学习“前端免费学习笔记（深入）”；
- 在组件中使用
store.$state的响应式解构，只监听关心的字段：const { theme, menuCollapse } = storeToRefs(useLayoutStore()) - 对高频率更新的配置（如实时字体大小调节），用
watch监听特定字段变化，手动触发局部 update 或 class 切换，而不是依赖模板自动响应 - 不建议在模板中直接写
{{ $store.layout.theme }}，易导致冗余计算和难以调试的响应链
配套建议：让配置真正“可配”
光有状态不够，得配上控制入口和约束机制：
- 为每个配置项定义类型（TypeScript interface），明确可选值，例如
theme: 'light' | 'dark' | 'auto' - 提供 setter 方法封装逻辑，比如
setTheme(val)内部自动写入 localStorage，并触发 CSS 变量更新，而不是裸露 state 赋值 - 在开发环境开启配置面板（如独立的 SettingsDrawer），实时修改并预览效果，修改后自动 commit 到 store，方便联调
