Vue3+Pinia+TS笔记
很久没有写文章分享笔记了，今天续更一下......
在当今前端开发中，Vue3 凭借其 Composition API 和性能优化，已成为构建现代 Web 应用的首选框架之一。而 Pinia 作为 Vue 官方推荐的状态管理库，以其简洁的 API 和 TypeScript 友好性，逐渐取代 Vuex 成为新项目的标配。再加上 TypeScript 提供的类型安全，这套技术栈能够显著提升代码的可维护性和开发体验。
一、Vue3+Pinia+TS整体流程和关键细节：
1. 项目启动与全局配置
入口文件：main.ts
创建 Vue 应用实例，注册 ElementPlus、全局组件、路由、Pinia 仓库。
应用挂载到 #app。
2. 路由系统
路由配置：
定义了所有静态路由
使用 vue-router 配置 hash 路由模式。
路由守卫：
全局前置守卫：每次路由跳转前执行，判断 token 和用户信息，决定是否放行或重定向到登录页。
逻辑：
有 token 且访问登录页，重定向到首页。
有 token 且有 username，直接放行。
有 token 但无 username，调用 userInfo 获取用户信息，成功放行，失败登出并跳转登录。
无 token，访问登录页放行，否则重定向到登录页。
3. 状态管理（Pinia）
仓库入口：store/index.ts
用户模块：store/modules/user.ts
state： 保存 token、菜单路由、用户名、头像。
actions：
userLogin：调用登录接口，保存 token。
userInfo：调用用户信息接口，保存用户名和头像。
userLogout：调用退出接口，清空 token 和用户信息。
token 的本地持久化通过 utils/token.ts 实现。
4. 接口管理
用户相关接口：api/user/index.ts
reqLogin、reqUserInfo、reqLogout 分别对应登录、获取用户信息、退出登录。
所有接口通过 request.ts 统一封装 axios 实例，自动携带 token。
请求拦截器：utils/request.ts
请求前自动从 Pinia 获取 token，放到请求头。
响应拦截器统一处理错误码，弹出消息。5. 视图与布局
主布局：layout/index.vue
左侧菜单、顶部 tabbar、右侧主内容区。
菜单和面包屑根据路由和用户权限动态生成。
登录页：views/login/index.vue
二、每个模块的作用
1. api（接口请求模块）
作用：统一管理所有后端接口请求（如登录、获取用户信息、商品管理等）。
通常每个业务有一个对应的 api 文件，如 api/user.ts、api/product.ts。
这里会用到接口参数和返回值的类型定义。
2. store（状态管理模块）
作用：用 Pinia 管理全局状态，如用户信息、菜单、权限等。
每个业务有一个小仓库模块，如 store/modules/user.ts。
这里会用到 state、actions、getters 的类型定义。
3. router（路由模块）
作用：定义页面路由结构，控制页面跳转和权限。
路由 meta 字段常用来定义类型（如菜单、权限等）。
4. views（页面视图模块）
作用：每个页面的具体实现。
页面组件会用到 props、emit、接口数据等类型。
5. utils（工具模块）
作用：封装通用工具函数，如 token 操作、请求封装等。
工具函数参数和返回值也可以定义类型。
6. types（类型定义模块，部分项目会单独建一个 types 文件夹）
作用：集中管理全局/通用的类型定义，避免重复和混乱。
比如：用户、商品、菜单、接口响应等通用类型。
三、TypeScript 类型文件的编写时机和放置原则
1. 什么时候写类型？
接口请求时：定义接口参数和返回值类型，保证请求和响应的数据结构安全。
Pinia 仓库 state 时：定义 state 的类型，保证状态管理的类型安全。
组件 props/emit 时：定义 props、emit 的类型，保证组件间通信安全。
工具函数参数/返回值时：定义工具函数的输入输出类型。2. 类型文件放在哪里？
业务相关类型：放在对应业务模块下的 types 文件夹或 type.ts 文件。
例如：type.ts、src/store/modules/user/type.ts
全局/通用类型：放在 src/types/ 目录下，供全局 import。
例如：src/types/global.d.ts、src/types/common.ts
小型项目：可以直接在 api 或 store 文件夹下建 type.ts。
大型项目：建议每个大模块单独建 types 文件夹，统一管理。
四、我的思路理解：
当你在某个模块（如 user、product、order 等）需要定义 TypeScript 类型时，可以在该模块下新建一个 type.ts 或 types 文件夹，专门存放类型定义。
在 type 文件中，定义接口、类型别名等（如接口参数、响应数据、state 结构等）。
在需要用到这些类型的文件（如 api、store、组件等）通过 import 导入并绑定类型。
五、关于ts类型的定义：
1. 定义 TypeScript 类型只需要新建一个 .ts 后缀的文件即可，在这个文件里可以编写接口（interface）、类型别名（type）、枚举（enum）等类型定义。
2. .ts 后缀的文件不仅可以编写类型（如 interface、type、enum），还可以编写普通的 TypeScript 代码，比如变量、函数、类、业务逻辑等。
3. .ts 文件可以编写与 Vue 组件相关的逻辑代码（如函数、类、状态管理、工具方法等），但不能直接写模板（template）和样式（style），也不能像 .vue 文件那样包含 <template>、<script>、<style> 三个部分。
具体说明：
.ts 文件适合写：
业务逻辑函数（如工具函数、接口请求、状态管理等）
类型定义（interface、type）
组合式 API 的逻辑封装（如自定义 hooks）
组件的 props、emit 类型等
.vue 文件适合写：
组件的模板（HTML）
组件的逻辑（JS/TS）
组件的样式（CSS/SCSS）
六、关于router和route的区别
route 和 router 都来自 vue-router，但它们的作用和使用场景不同：
1. router
含义：router 是路由实例对象，包含了整个路由系统的配置和方法。
常用功能：用于编程式导航（跳转页面）、添加/删除路由、获取路由实例等。
常用方法：
router.push() 跳转到某个路由
router.replace() 替换当前路由
router.back() 返回上一页
使用场景：当你需要在代码中主动跳转页面、返回、动态添加路由时，使用 router。
2. route
含义：route 是当前激活的路由对象，包含当前路由的路径、参数、query、meta 等信息。
常用属性：
route.path 当前路径
route.params 动态路由参数
route.query 查询参数
route.meta 路由元信息
使用场景：当你需要获取当前页面的路由信息（如参数、路径、meta），用 route。
总结
router：用于跳转、操作路由（“做事”）
route：用于获取当前路由信息（“拿数据”）
在 Vue 组件中，通常用 useRouter() 获取 router，用 useRoute() 获取 route。
这部分是自己在学习的时候摘抄并整理的 ，希望对你有帮助！