Vue 3 + Pinia：是否应为每个组件创建单独的Store？

首先明确两个极端的问题：

• 绝对不要为每个组件单独创建Store：Store的核心作用是管理全局/跨组件共享的状态，组件自身的临时状态（比如表单输入、弹窗显示）完全可以用组件内部的ref/reactive维护，硬塞到Store里只会造成冗余，让其他开发者找不到状态归属。
• 也别搞单一巨型Store：把所有状态堆在一起，会导致逻辑耦合严重，查找和修改状态的成本极高，后期拆分维护几乎不可能。

折中方案：按「业务领域/功能模块」拆分Store #

这是Pinia官方最推荐的实践，核心是让每个Store只负责一个独立的业务领域，边界清晰，开发者能快速定位状态所在。举几个常见的拆分例子：

• useUserStore：处理用户登录、个人信息、权限验证等用户相关逻辑
• useCartStore：管理购物车商品添加、数量修改、结算流程
• useAppStore：维护全局配置（主题、语言、布局模式）、系统通知等全局状态
• useArticleStore：负责文章列表、详情、编辑等内容模块的状态

补充：不同场景下的状态归属判断 #

• 局部状态（仅当前组件使用）：直接用组件内部的ref/reactive，比如某个按钮的加载状态、表单临时输入值
• 组件树内共享（父子/祖孙组件传递）：用provide/inject，比Store更轻量，不需要全局暴露
• 跨页面/多组件共享：放到对应业务领域的Store里

跨Store逻辑的处理方式 #

如果某个Store需要依赖另一个Store的状态或逻辑，Pinia允许直接在Store内部调用其他Store，不用强行把逻辑合并到一个Store里：

// stores/cart.js
import { defineStore } from 'pinia'
import { useUserStore } from './user'

export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  actions: {
    addItem(item) {
      const userStore = useUserStore()
      // 依赖用户登录状态判断是否允许添加商品
      if (userStore.isLoggedIn) {
        this.items.push(item)
      }
    }
  }
})

总结原则 #

1. 优先判断状态是否需要共享：非共享状态坚决不进Store
2. 按业务领域拆分Store，每个Store职责单一，避免"大杂烩"
3. 不盲目拆分：如果两个业务领域高度耦合（比如订单和支付），可以考虑合并成一个Store，或通过跨Store调用处理

内容的提问来源于stack exchange，提问作者Cameron Fitzpatrick