vue3 ts pinia

下面给你一套「能直接复制用、结构清晰、企业级规范」的 Pinia 分组 模块间调用完整示例代码。✅ Vue 3✅ TypeScript✅ Pinia✅ 模块化✅ 有 state / getter / action✅ 有模块间调用一、目录结构重点src/ ├── store/ │ ├── modules/ │ │ ├── user.ts │ │ └── order.ts │ ├── index.ts │ └── types.ts二、类型定义store/types.ts// 用户exportinterfaceUserInfo{id:numbername:string}// 订单exportinterfaceOrder{id:numbertitle:stringprice:number}三、user 模块store/modules/user.tsimport{defineStore}frompiniaimport{ref,computed}fromvueimporttype{UserInfo}from../typesexportconstuseUserStoredefineStore(user,(){// state consttokenref()constuserInforefUserInfo|null(null)// getter constisLogincomputed(()!!token.value)// action functionsetToken(val:string){token.valueval}functionsetUserInfo(info:UserInfo){userInfo.valueinfo}functionlogout(){token.valueuserInfo.valuenull}return{token,userInfo,isLogin,setToken,setUserInfo,logout,}})四、order 模块store/modules/order.ts✅这里演示「调用 user 模块」import{defineStore}frompiniaimport{ref,computed}fromvueimport{useUserStore}from./userimporttype{Order}from../typesexportconstuseOrderStoredefineStore(order,(){// state constorderListrefOrder[]([])// getter consttotalPricecomputed(()orderList.value.reduce((sum,item)sumitem.price,0))// action functionsubmitOrder(order:Order){constuserStoreuseUserStore()if(!userStore.isLogin){thrownewError(请先登录)}orderList.value.push(order)}return{orderList,totalPrice,submitOrder,}})✅关键点constuserStoreuseUserStore()userStore.isLogin五、统一导出store/index.tsimport{createPinia}frompiniaimporttype{App}fromvueexportconstpiniacreatePinia()exportfunctionsetupStore(app:App){app.use(pinia)}// 模块统一导出export*from./modules/userexport*from./modules/order六、main.ts 注册import{createApp}fromvueimportAppfrom./App.vueimport{setupStore}from./storeconstappcreateApp(App)setupStore(app)app.mount(#app)七、在组件中使用完整示例1️⃣ 使用 user storescript setup langts import { useUserStore } from /store const userStore useUserStore() /script template div p是否登录{{ userStore.isLogin }}/p button clickuserStore.setToken(abc123)登录/button button clickuserStore.logout退出/button /div /template2️⃣ 使用 order store并调用 userscript setup langts import { useOrderStore } from /store import { useUserStore } from /store const orderStore useOrderStore() const userStore useUserStore() /script template div button :disabled!userStore.isLogin clickorderStore.submitOrder({ id: 1, title: 商品A, price: 99 }) 提交订单 /button ul li v-foritem in orderStore.orderList :keyitem.id {{ item.title }} - ¥{{ item.price }} /li /ul p总价¥{{ orderStore.totalPrice }}/p /div /template八、模块调用关系图很重要App ├── useUserStore └── useOrderStore └── useUserStore跨模块调用✅Pinia 官方推荐这种方式✅ 无需 event bus✅ 无层级嵌套一、Pinia 是什么核心认知✅ Vue 官方状态管理库✅ Vuex 的继任者✅ 专为 Vue 3 Composition API 设计核心特点没有 mutations ✅完整的 TS 支持 ✅模块化天生支持 ✅支持 DevTools ✅支持服务端渲染SSR✅二、Pinia 基础知识点必会1️⃣ 创建 Piniaimport{createPinia}frompiniaconstpiniacreatePinia()app.use(pinia)2️⃣ 定义 Store两种写法✅ 组合式推荐exportconstuseUserStoredefineStore(user,(){consttokenref()functionsetToken(val:string){token.valueval}return{token,setToken}})⚠️ 选项式了解exportconstuseUserStoredefineStore(user,{state:()({token:}),actions:{setToken(val:string){this.tokenval},},})3️⃣ State状态constcountref(0)等价于state:()({count:0})✅ 响应式✅ 支持ref / reactive4️⃣ Getter派生状态constdoublecomputed(()count.value*2)✅ 缓存✅ 类似 Vue computed5️⃣ Action修改状态functionincrement(){count.value}✅ 同步 / 异步都可以✅ 不需要 mutation三、Pinia 进阶知识点中高级6️⃣ Store 的使用方式constuserStoreuseUserStore()userStore.setToken(xxx)✅ 可在setup普通函数service非组件代码中调用7️⃣ 多 Store 之间通信constuserStoreuseUserStore()constorderStoreuseOrderStore()✅ 天然支持✅ 无嵌套地狱8️⃣ Store 分组 / 模块化store/ ├── user.ts ├── order.ts✅ 推荐按业务拆分✅ 不要一个 store 管全部9️⃣ Store 重置resetuserStore.$reset()✅ 重置为初始 state 订阅状态变化userStore.$subscribe((mutation,state){console.log(mutation,state)})✅ 用于埋点 / 日志 / 调试四、Pinia 高级知识点企业级1️⃣1️⃣ 持久化非常常见npmi pinia-plugin-persistedstateexportconstuseUserStoredefineStore(user,(){...},{persist:true,})1️⃣2️⃣ SSR / Nuxt 支持conststoreuseUserStore(pinia)✅ 同构渲染✅ hydration 自动处理1️⃣3️⃣ Store 的解构必须知道❌ 错误失去响应性const{token}userStore✅ 正确import{storeToRefs}frompiniaconst{token}storeToRefs(userStore)1️⃣4️⃣ Store 作为参数传递解耦functionlogout(userStore:ReturnTypetypeofuseUserStore){userStore.$reset()}1️⃣5️⃣ 自定义插件高级exportfunctionmyPiniaPlugin({store}){store.$onAction(({name,args}){console.log(name,args)})}五、Pinia 与 Vuex 对比面试高频对比项PiniaVuexmutations❌✅TS 支持✅✅✅⚠️模块化原生手动代码体积更小较大官方态度✅ 推荐❌ 维护模式六、Pinia 最佳实践企业级总结✅ 一个业务一个 store✅ 用组合式 API✅ store 只管状态不管请求✅ 请求放在 service 层✅ 大型项目用 domain 分层七、Pinia 学习路线建议基础用法 ↓ 模块化分组 ↓ TS 类型设计 ↓ 持久化 ↓ 工程化拆分store / service / model ↓ 性能 架构优化下面我按「面试标准答案 加分点」的方式把这 6 个 Pinia 高频问题一次性讲清楚你可以直接背也可以理解后用自己的话讲。1️⃣ Pinia 和 Vuex 的区别必考✅ 标准答案对比点PiniaVuex官方定位Vue3 官方推荐Vue2 时代产物mutations❌ 移除✅ 必须有actions支持同步 / 异步支持模块化天生支持需要 namespaceTypeScript原生友好类型复杂代码体积更小较大心智模型简单偏重✅ 加分一句话Pinia 是 Vuex 的精神继承者专门为 Vue 3 和 Composition API 设计。2️⃣ 为什么 Pinia 不需要 mutation✅ 标准答案mutation 的存在是为了追踪同步变更Pinia 使用ref / reactiveVue DevTools 已经能追踪.value的变化同步 / 异步都可以在 action 中完成✅ 面试原话在 Pinia 中state 本身就是响应式的action 可以直接修改 state不再需要 mutation 这一层约束。3️⃣ Pinia 的 state 本质是什么✅ 标准答案在组合式写法中constcountref(0)state 的本质就是ref或reactive对象Pinia 内部会把它们收集起来暴露给 DevTools 和插件。✅ 一句话总结Pinia 的 state Composition API 的响应式数据4️⃣ 如何在组件外使用 Pinia高频✅ 场景serviceutils请求拦截器非 Vue 文件✅ 标准写法import{createPinia}frompiniaconstpiniacreatePinia()constuserStoreuseUserStore(pinia)✅ 在项目中已注册import{useUserStore}from/storeconstuserStoreuseUserStore()✅ 面试加分点Pinia 不依赖组件上下文只要传入 pinia 实例即可在任何地方使用。5️⃣ Pinia 如何实现持久化✅ 标准答案最常用使用官方生态插件npmi pinia-plugin-persistedstateexportconstuseUserStoredefineStore(user,(){...},{persist:true,})✅ 可配置persist:{key:user-store,storage:localStorage,}✅ 加分点Pinia 本身不负责持久化通过插件机制实现符合单一职责原则。6️⃣ storeToRefs 是干嘛的✅ 问题背景const{token}userStore// ❌ 失去响应性✅ 正确答案import{storeToRefs}frompiniaconst{token}storeToRefs(userStore)✅ 原理简述store 本身是 reactive直接解构会破坏响应性storeToRefs只把 state / getter 转成refstoreToRefs用于在解构 Pinia store 时保留响应性。✅Composition API✅去掉 mutation✅TypeScript 原生支持