系统网站建设ppt腾讯企点账户中心
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 大事件管理系统
创建项目
1. 进入项目目录
2. 安装依赖
3. 启动项目
Eslint 配置代码风格
配置文件 .eslintrc.cjs
1. prettier 风格配置
1. 单引号
2. 不使用分号
3. 宽度80字符
4. 不加对象|数组最后逗号
5. 换行符号不限制（win mac 不一致）
2. vue组件名称多单词组成（忽略index.vue）
3. props解构（关闭）
注：安装Eslint且配置保存修复，不 要开启默认的自动保存格式化
暂存区 eslint 校验
1. 安装 lint-staged 包 pnpm i lint-staged -D
2. package.json 配置 lint-staged 命令
3. .husky/pre-commit 文件修改
目录调整
默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。
主要是以下工作：
1. 删除一些初始化的默认文件
2. 修改剩余代码内容
3. 新增调整我们需要的目录结构
4. 拷贝全局样式和图片，安装预处理器支持
路由初始化
创建路由实例由 createRouter 实现
路由模式
1. history 模式使用 createWebHistory()
2. hash 模式使用 createWebHashHistory()
3. 参数是基础路径
按需引入 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 中
首页整体路由设计
