vue学习笔记8

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 风格配置

  2. 单引号

  3. 不使用分号

  4. 宽度80字符

  5. 不加对象|数组最后逗号

  6. 换行符号不限制(win mac 不一致)

  7. vue组件名称多单词组成(忽略index.vue)

  8. 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 中

首页整体路由设计

相关推荐
livemetee43 分钟前
Flink2.0学习笔记:Flink服务器搭建与flink作业提交
大数据·笔记·学习·flink
INS_KF1 小时前
【C++知识杂记2】free和delete区别
c++·笔记·学习
Easocen2 小时前
Mybatis学习笔记(五)
笔记·学习·mybatis
丑小鸭是白天鹅4 小时前
嵌入式C语言学习笔记之枚举、联合体
c语言·笔记·学习
楼田莉子5 小时前
C++算法题目分享:二叉搜索树相关的习题
数据结构·c++·学习·算法·leetcode·面试
十一10245 小时前
FX10/20 (CYUSB401X)开发笔记5 固件架构
笔记
FakeOccupational5 小时前
【电路笔记 通信】AXI4-Lite协议 FPGA实现 & Valid-Ready Handshake 握手协议
笔记·fpga开发
奶黄小甜包6 小时前
C语言零基础第18讲:自定义类型—结构体
c语言·数据结构·笔记·学习
rannn_1118 小时前
【MySQL学习|黑马笔记|Day7】触发器和锁(全局锁、表级锁、行级锁、)
笔记·后端·学习·mysql
喜欢吃燃面9 小时前
C++算法竞赛:位运算
开发语言·c++·学习·算法