Pinia基础使用 - 计数器案例
定义Store（state + action）
组件使用Store
getters实现
Pinia中的 getters 直接使用 computed函数 进行模拟, 组件中需要使用需要把 getters return出去
action异步实现
编写方式：异步action函数的写法和组件中获取异步数据的写法完全一致接口地址：
需求：在Pinia中获取频道列表数据并把数据渲染App组件的模板中
storeToRefs工具函数
使用storeToRefs函数可以辅助保持数据（state + getter）的响应式解构
pinia持久化插件
Pinia 如何快速实现持久化？
pinia-plugin-persistedstate
Vue3 大事件管理系统
创建项目
-
进入项目目录
-
安装依赖
-
启动项目
Eslint 配置代码风格
配置文件 .eslintrc.cjs
-
prettier 风格配置
-
单引号
-
不使用分号
-
宽度80字符
-
不加对象|数组最后逗号
-
换行符号不限制（win mac 不一致）
-
vue组件名称多单词组成（忽略index.vue）
-
props解构（关闭）
注：安装Eslint且配置保存修复，不 要开启默认的自动保存格式化
暂存区 eslint 校验
-
安装 lint-staged 包 pnpm i lint-staged -D
-
package.json 配置 lint-staged 命令
-
.husky/pre-commit 文件修改
目录调整
默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。
主要是以下工作：
-
删除一些初始化的默认文件
-
修改剩余代码内容
-
新增调整我们需要的目录结构
-
拷贝全局样式和图片，安装预处理器支持
路由初始化
创建路由实例由 createRouter 实现
路由模式
-
history 模式使用 createWebHistory()
-
hash 模式使用 createWebHashHistory()
-
参数是基础路径
按需引入 Element Plus
Pinia 构建用户仓库 和 持久化
Pinia 仓库统一管理
pinia 独立维护
初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一
优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用
仓库 统一导出
使用一个仓库 import { useUserStore } from `./stores/user.js` 不同仓库路径不一致
优化：由 stores/index.js 统一导出，导入路径统一 `./stores`，而且仓库维护在 stores/modules 中
首页整体路由设计
