按功能拆分 Pinia 仓库
1、示例仓库结构：（以下示例来自AI，存档是为了后期看到此分割结构）
src/ ├── stores/ # 所有 Pinia 仓库的根目录 │ ├── index.js # 仓库的统一导出入口（可选，但推荐） │ ├── user.js # 用户相关仓库（登录、个人信息等） │ ├── cart.js # 购物车相关仓库（商品增删、数量等） │ ├── goods.js # 商品相关仓库（列表、详情、筛选等） │ └── settings.js # 系统设置仓库（主题、语言等） └── main.js # 项目入口2、编写单个功能的仓库文件
①用户仓库：src/stores/user.js
import { defineStore } from 'pinia' // 定义并导出用户仓库，命名规则：use + 功能名 + Store export const useUserStore = defineStore('user', { // 状态：存储用户相关数据 state: () => ({ userId: '', username: '', token: '', avatar: '', isLogin: false }), // 计算属性：基于state派生的状态 getters: { // 示例：获取用户信息摘要 userInfoSummary: (state) => { return state.isLogin ? `${state.username} (${state.userId})` : '未登录' } }, // 方法：修改状态的逻辑（同步/异步都支持） actions: { // 登录操作 login(userData) { this.userId = userData.userId this.username = userData.username this.token = userData.token this.avatar = userData.avatar this.isLogin = true // 可结合异步请求：如 await api.login(xxx) }, // 退出登录 logout() { // 重置state（Pinia内置方法，快速清空当前仓库状态） this.$reset() } } })②购物车仓库：src/stores/cart.js
import { defineStore } from 'pinia' export const useCartStore = defineStore('cart', { state: () => ({ // 购物车商品列表：[{ id, name, price, count }] goodsList: [], totalPrice: 0 }), getters: { // 计算购物车商品总数 goodsCount: (state) => { return state.goodsList.reduce((sum, item) => sum + item.count, 0) } }, actions: { // 添加商品到购物车 addGoods(goods) { const existing = this.goodsList.find(item => item.id === goods.id) if (existing) { existing.count += 1 } else { this.goodsList.push({ ...goods, count: 1 }) } // 重新计算总价 this.calcTotalPrice() }, // 计算总价（内部辅助方法） calcTotalPrice() { this.totalPrice = this.goodsList.reduce( (sum, item) => sum + item.price * item.count, 0 ) }, // 清空购物车 clearCart() { this.goodsList = [] this.totalPrice = 0 } } })3、统一导出入口（可选但推荐）
创建src/stores/index.js，把所有仓库统一导出，方便组件中批量引入：
// 统一导出所有仓库，简化组件引入 export * from './user' export * from './cart' export * from './goods' export * from './settings'4、Pinia 在 main.js 中的注册步骤
// src/main.js import { createApp } from 'vue' import { createPinia } from 'pinia' // 导入 Pinia 创建方法 import App from './App.vue' // 1. 创建 Vue 应用实例 const app = createApp(App) // 2. 创建 Pinia 实例 const pinia = createPinia() // 3. 将 Pinia 挂载到 Vue 应用上（核心步骤） app.use(pinia) // 4. 挂载应用到 DOM app.mount('#app')5、在组件中使用拆分后的仓库
<template> <div> <div>用户状态：{{ userStore.userInfoSummary }}</div> <div>购物车商品数：{{ cartStore.goodsCount }}</div> <button @click="handleLogin">模拟登录</button> <button @click="handleAddGoods">添加商品到购物车</button> </div> </template> <script setup> // 方式1：从统一入口引入（推荐） import { useUserStore, useCartStore } from '@/stores' // 方式2：直接从单个仓库文件引入 // import { useUserStore } from '@/stores/user' // import { useCartStore } from '@/stores/cart' // 获取仓库实例（Pinia会自动缓存，多次调用返回同一个实例） const userStore = useUserStore() const cartStore = useCartStore() // 模拟登录 const handleLogin = () => { userStore.login({ userId: '1001', username: '张三', token: 'xxx-xxx-xxx', avatar: '/avatar.png' }) } // 模拟添加商品 const handleAddGoods = () => { cartStore.addGoods({ id: 'goods001', name: 'Vue实战教程', price: 99 }) } </script>6、跨仓库调用。如果一个仓库需要依赖另一个仓库的数据 / 方法（比如购物车需要用户登录状态），可在actions中直接引入并使用：
// 在 cart.js 中依赖 user.js 的状态 import { useUserStore } from './user' export const useCartStore = defineStore('cart', { actions: { addGoods(goods) { const userStore = useUserStore() // 未登录则提示，不允许添加 if (!userStore.isLogin) { alert('请先登录！') return } // 已登录则执行添加逻辑 // ... 省略原有添加代码 } } })