1、示例仓库结构以下示例来自AI存档是为了后期看到此分割结构src/ ├── stores/ # 所有 Pinia 仓库的根目录 │ ├── index.js # 仓库的统一导出入口可选但推荐 │ ├── user.js # 用户相关仓库登录、个人信息等 │ ├── cart.js # 购物车相关仓库商品增删、数量等 │ ├── goods.js # 商品相关仓库列表、详情、筛选等 │ └── settings.js # 系统设置仓库主题、语言等 └── main.js # 项目入口2、编写单个功能的仓库文件①用户仓库src/stores/user.jsimport { 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() { // 重置statePinia内置方法快速清空当前仓库状态 this.$reset() } } })②购物车仓库src/stores/cart.jsimport { 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 ./settings4、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 clickhandleLogin模拟登录/button button clickhandleAddGoods添加商品到购物车/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 }) } /script6、跨仓库调用。如果一个仓库需要依赖另一个仓库的数据 / 方法比如购物车需要用户登录状态可在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 } // 已登录则执行添加逻辑 // ... 省略原有添加代码 } } })