153~173笔记

Pinia是Vue的最新状态管理工具，是Vuex的替代品
提供更加简单的API（去掉了mutation）
提供符合，组合式风格的API（和Vue3新语法统一）
去掉了modules的概念，每一个store都是一个独立的模块
配合TypeScript更加友好，提供可靠的类型推断

 手动添加Pinia到Vue项目
 在实际开发项目的时候，关于Pinia的配置，可以在项目创建时自动添加
 使用Vite创建一个空的Vue3项目
 npm create vue@latest
 按照官方文档安装pinia到项目中

Pinia持久化插件

 官方文档：https://prazdevs.github.io/pinia - plugin - persistedstate/zh/
 1.安装插件pinia - plugin - persistedstate
 npm i pinia - plugin - persistedstate
 2.main.js使用：
 import persist from 'pinia - plugin - persistedstate'
..
 app.use(createPinia().use(persist))
 3.store仓库中，persist: true开启

Pinia是新一代的状态管理工具，替代vuex
 
Pinia中不需要mutation
 action既支持同步也支持异步
 Pinia实现getter：computed计算属性函数
 Pinia产生的Store如何解构赋值数据保持响应式？
  storeToRefs
 Pinia如何快速实现持久化？
  pinia - plugin - persistedstate

Eslint配置代码风格
配置文件.eslintrc.cjs
 1.prettier风格配置https://prettier.io
 单引号
不使用分号
宽度80字符
不加对象|数组最后逗号
换行符号不限制（win mac不一致）
 2.vue组件名称多单词组成（忽略index.vue）
3.props解构（关闭）
 提示：安装Eslint且配置保存修复，不要开启默认的自动保存格式化
 

提交前做代码检查
初始化git仓库，执行git init即可
初始化husky工具配置，执行pnpm dlx husky - init && pnpm install即可
  https://typicode.github.io/husky/
 修改.husky/pre - commit文件
 
 -npm test
+pnpm lint

暂存区eslint校验
安装lint - staged包pnpm i lint - staged - D
package.json配置lint - staged命令
.husky/pre - commit文件修改

1.创建路由实例由 createRouter 实现
 2.路由模式
 history 模式使用 createWebHistory()
 hash 模式使用 createWebHashHistory()
 参数是基础路径，默认

createRouter 创建路由实例
 配置 history 模式
 1. history模式：createWebHistory 地址栏不带 
 2. hash模式： createWebHashHistory 地址栏带 

在Vue3 CompositionAPI中
 1. 获取路由对象router useRouter
  const router = useRouter()
 2. 获取路由参数route useRoute
  const route = useRoute()

登录访问拦截 => 默认是直接放行的
根据返回值决定，是放行还是拦截
 返回值：
 1. undefined / true 直接放行
 2. false 拦回from的地址页面
 3. 具体路径 或 路径对象 拦截到对应的地址
   '/login'  { name: 'login' }
如果没有token，且访问的是非登录页，拦截到登录，其他情况正常放行