个人网站模板制作中国站长素材网

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 中

首页整体路由设计