一、Pinia 快速入门
**1.**什么是Pinia
Pinia 是 Vue 的最新 状态管理工具 ，是 Vuex 的 替代品
（1）提供更加简单的API （去掉了 mutation ）
（2）提供符合，组合式风格的API （和 Vue3 新语法统一）
（3）去掉了 modules 的概念，每一个 store 都是一个独立的模块
（4）配合 TypeScript 更加友好，提供可靠的类型推断
**2.**手动添加Pinia到Vue项目
（1）使用 Vite 创建一个空的 Vue3 项目
npm create vue@latest
（2）按照官方文档 安装 pinia 到项目中
**3.**Pinia基础使用 - 计数器案例
（1）定义store
（2）组件使用store
**4.**getters实现
Pinia中的 getters 直接使用 computed函数 进行模拟, 组件中需要使用需要把 getters return出去
**5.**action异步实现
（1）编写方式：异步action函数的写法和组件中获取异步数据的写法完全一致
（2）接口地址：http://geek.itheima.net/v1_0/channels
（3）需求：在Pinia中获取频道列表数据并把数据渲染App组件的模板中
**6.**storeToRefs工具函数
使用storeToRefs函数可以辅助保持数据（state + getter）的响应式解构
**7.**Pinia的调试
Vue官方的 dev-tools 调试工具 对 Pinia直接支持，可以直接进行调试
**8.**Pinia持久化插件
（1）官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/
（2）安装插件 pinia-plugin-persistedstate
npm i pinia-plugin-persistedstate
（3）main.js 使用
import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))
（4）store仓库中，persist: true 开启
**9.**总结
二、Vue3 大事件管理系统
**1.**大事件项目介绍 和 创建
（1）Vue3 大事件管理系统
①在线演示：https://fe-bigevent-web.itheima.net/login
②接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835
③基地址：http://big-event-vue-api-t.itheima.net
（2）pnpm 包管理器 - 创建项目
一些优势：比同类工具快2倍左右、节省磁盘空间... https://www.pnpm.cn/
安装方式：npm install -g pnpm
创建项目：pnpm create vue
（3）创建项目
① 进入项目目录 ② 安装依赖 ③ 启动项目
=>
**2.**Eslint 配置代码风格
配置文件 .eslintrc.cjs
（1）prettier 风格配置 https://prettier.io
① 单引号 ② 不使用分号 ③ 宽度80字符
④ 不加对象|数组最后逗号 ⑤ 换行符号不限制（win mac 不一致）
（2）vue组件名称多单词组成（忽略index.vue）
（3）props解构（关闭）
提示：安装Eslint且配置保存修复，不 要开启默认的自动保存格式化
**3.**配置代码检查工作流
（1）提交前做代码检查
① 初始化 git 仓库，执行 git init 即可
② 初始化 husky 工具配置，执行pnpm dlx husky-init && pnpm install即可
https://typicode.github.io/husky/
③ 修改 .husky/pre-commit 文件
问题：pnpm lint 是全量检查，耗时问题，历史问题
（2）暂存区 eslint 校验
① 安装 lint-staged 包pnpm i lint-staged -D
② package.json 配置 lint-staged 命令
③ .husky/pre-commit 文件修改
=>
(3)总结
**4.**目录调整
**5.**vue-router4 路由代码解析
（1）路由初始化
=>
-
创建路由实例由 createRouter 实现
-
路由模式
① history 模式使用 createWebHistory()
② hash 模式使用 createWebHashHistory()
③参数是基础路径，默认/
（2）总结
创建一个路由实例，路由模式是history模式，路由的基础地址是 vite.config.js中的 base 配置的值，默认是 / , 环境变量地址：https://cn.vitejs.dev/guide/env-and-mode.html
**6.**引入 Element Plus 组件库
（1）按需引入 Element Plus
① 安装： pnpm add element-plus
② 配置按需导入：
官方文档：https://element-plus.org/zh-CN/guide/quickstart.html
③ 直接使用组件
④ 彩蛋：默认 components 下的文件也会被 自动注册~
**7.**Pinia 构建仓库 和 持久化
**8.**Pinia 仓库统一管理
（1）pinia 独立维护
现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一
优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用
（2）仓库 统一导出
现在：使用一个仓库 import { useUserStore } from `./stores/user.js` 不同仓库路径不一致
优化：stores/index.js统一导出，导入路径统一`./stores`，而且仓库维护在stores/modules 中
**9.**数据交互 - 请求工具设计
**10.**整体路由设计
