Vue3（2）

一.Vue新特性

（1）defineOptions:主要是用来定义Options API的选项

背景说明：有< script setup >之前，如果定义props，emits可以轻而易举地添加一个与setup平级
的属性。但是用了< script setup >后，就没法这么干了setup属性已经没有了，自然无法添加与其平级的属性

为了解决这一问题，引入defineProps与defineEmits这两个宏。但这只解决了Props与Emits这两个属性。

在这里插入图片描述

<!-- <script>
export default {name: 'LoginIndex'
}
</script> --><script setup>
defineOptions({name: 'LoginIndex'
})
</script><template>
<div>我是登录页
</div>
</template>

（2）defineModel

在vue3中，自定义组件上使用v-model，相当于传递一个modelValue属性，同时触发update：modelValue事件
在这里插入图片描述

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue({script: {defineModel: true}}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

在这里插入图片描述

<script setup>
import { defineModel } from 'vue'
const modelValue = defineModel()
</script><template>
<div><input type="text" :value="modelValue" @input="e => modelValue = e.target.value">
</div>
</template>

二.Pinia快速入门

（1）什么是Pinia

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

(2)手动添加Pinia到Vue项目

在实际开发项目的时候，关于Pinia的配置，可以在项目创建时自动添加
现在我们初次学习，从零开始：
1.使用 Vite 创建一个空的 Vue3 项目
npm create vue@latest
2.按照官方文档安装 pinia 到项目中

import { createApp } from 'vue'
import { createPinia } from 'pinia'
// 导入持久化的插件
import persist from 'pinia-plugin-persistedstate'import App from './App.vue'
const pinia = createPinia() // 创建Pinia实例
const app = createApp(App) // 创建根实例
app.use(pinia.use(persist)) // pinia插件的安装配置
app.mount('#app') // 视图的挂载

（3）Pinia基础使用 - 计数器案例

1.定义store
在这里插入图片描述
↓

2.组件使用store
定义Store（state + action）组件使用Store

import { createApp } from 'vue'
import { createPinia } from 'pinia'
// 导入持久化的插件
import persist from 'pinia-plugin-persistedstate'import App from './App.vue'
const pinia = createPinia() // 创建Pinia实例
const app = createApp(App) // 创建根实例
app.use(pinia.use(persist)) // pinia插件的安装配置
app.mount('#app') // 视图的挂载

（4）getters实现

Pinia中的 getters 直接使用 computed函数进行模拟, 组件中需要使用需要把 getters return出去
在这里插入图片描述

// 定义store
// defineStore(仓库的唯一标识, () => { ... })
export const useCounterStore = defineStore('counter', () => {// 声明数据 state - countconst count = ref(100)// 声明操作数据的方法 action (普通函数)const addCount = () => count.value++const subCount = () => count.value--// 声明基于数据派生的计算属性 getters (computed)const double = computed(() => count.value * 2)// 声明数据 state - msgconst msg = ref('hello pinia')return {count,double,addCount,subCount,msg,}
}

（5）action异步实现

编写方式：异步action函数的写法和组件中获取异步数据的写法完全一致
接口地址：http://geek.itheima.net/v1_0/channels
需求：在Pinia中获取频道列表数据并把数据渲染App组件的模板中
在这里插入图片描述

<script setup>
import { storeToRefs } from 'pinia'
import Son1Com from '@/components/Son1Com.vue'
import Son2Com from '@/components/Son2Com.vue'
import { useCounterStore } from '@/store/counter'
import { useChannelStore } from './store/channel'
const counterStore = useCounterStore()
const channelStore = useChannelStore()
</script><template><div><h3>App.vue根组件 - {{ count }}- {{ msg }}</h3><Son1Com></Son1Com><Son2Com></Son2Com><hr><button @click="getList">获取频道数据</button><ul><li v-for="item in channelList" :key="item.id">{{ item.name }}</li></ul></div>
</template><style scoped></style>

（6）storeToRefs工具函数

使用storeToRefs函数可以辅助保持数据（state + getter）的响应式解构
在这里插入图片描述

// 此时，直接解构，不处理，数据会丢失响应式
const { count, msg } = storeToRefs(counterStore)
const { channelList } = storeToRefs(channelStore)
const { getList } = channelStore

（7）Pinia的调试

Vue官方的 dev-tools 调试工具对 Pinia直接支持，可以直接进行调试多一句没有，少一句不行，用更短时间，教会更实用的技术！
高级软件人才培训专家

（8）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 开启

// persist: true // 开启当前模块的持久化persist: {key: 'hm-counter', // 修改本地存储的唯一标识paths: ['count'] // 存储的是哪些数据}

import { defineStore } from 'pinia'
import { ref } from 'vue'
import axios from 'axios'export const useChannelStore = defineStore('channel', () => {// 声明数据const channelList = ref([])// 声明操作数据的方法const getList = async () => {// 支持异步const { data: { data }} = await axios.get('http://geek.itheima.net/v1_0/channels')channelList.value = data.channels}// 声明getters相关return {channelList,getList}
})

三.大事件管理系统

（1）Eslint 配置代码风格

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

（2）配置代码检查工作流

提交前做代码检查

1.初始化 git 仓库，执行 git init 即可
2. 初始化 husky 工具配置，执行 pnpm dlx husky-init && pnpm install 即可
https://typicode.github.io/husky/
3. 修改 .husky/pre-commit 文件
在这里插入图片描述

问题：pnpm lint 是全量检查，耗时问题，历史问题。

暂存区 eslint 校验

1.安装 lint-staged 包 pnpm i lint-staged -D
2. package.json 配置 lint-staged 命令
在这里插入图片描述

3…husky/pre-commit 文件修改
在这里插入图片描述

（3）vue-router4 路由代码解析

在这里插入图片描述
1.创建路由实例由 createRouter 实现
2. 路由模式
①history 模式使用 createWebHistory()
② hash 模式使用 createWebHashHistory()
③参数是基础路径，默认

import { createRouter, createWebHistory } from 'vue-router'// createRouter 创建路由实例
// 配置 history 模式
// 1. history模式：createWebHistory     地址栏不带 #
// 2. hash模式：   createWebHashHistory 地址栏带 #// vite 中的环境变量 import.meta.env.BASE_URL  就是 vite.config.js 中的 base 配置项
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [ ]}]
})export default router

<script setup>
// 在 Vue3 CompositionAPI 中
// 1. 获取路由对象 router  useRouter
//    const router = useRouter()
// 2. 获取路由参数 route   useRoute
//    const route = useRoute()
import { useRoute, useRouter } from 'vue-router'
import { useUserStore, useCountStore } from '@/stores'
const router = useRouter()
const route = useRoute()const goList = () => {router.push('/list')console.log(router, route)
}
const userStore = useUserStore()
const countStore = useCountStore()
</script>

（4）按需引入 Element Plus

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})],base: '/',resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

（5）Pinia 构建用户仓库和持久化

在这里插入图片描述

import { defineStore } from 'pinia'
import { ref } from 'vue'// 用户模块 token setToken removeToken
export const useUserStore = defineStore('big-user',() => {const token = ref('')const setToken = (newToken) => {token.value = newToken}const removeToken = () => {token.value = ''}return {token,setToken,removeToken}},{persist: true}
)

（6）Pinia 仓库统一管理

pinia 独立维护

现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一
优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用

仓库统一导出

现在：使用一个仓库 import { useUserStore } from ./stores/user.js 不同仓库路径不一致
优化：由 stores/index.js 统一导出，导入路径统一 ./stores，而且仓库维护在 stores/modules 中

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'const pinia = createPinia()
pinia.use(persist)export default pinia
export * from './modules/user'
export * from './modules/counter'// import { useUserStore } from './modules/user'
// export { useUserStore }
// import { useCountStore } from './modules/counter'
// export { useCountStore }

import { defineStore } from 'pinia'
import { ref } from 'vue'// 数字计数器模块
export const useCountStore = defineStore('big-count', () => {const count = ref(100)const add = (n) => {count.value += n}return {count,add}
})

（7）数据交互 - 请求工具设计

在这里插入图片描述

import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'
const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({// TODO 1. 基础地址，超时时间baseURL,timeout: 10000
})// 请求拦截器
instance.interceptors.request.use((config) => {// TODO 2. 携带tokenconst useStore = useUserStore()if (useStore.token) {config.headers.Authorization = useStore.token}return config},(err) => Promise.reject(err)
)// 响应拦截器
instance.interceptors.response.use((res) => {// TODO 4. 摘取核心响应数据if (res.data.code === 0) {return res}// TODO 3. 处理业务失败// 处理业务失败, 给错误提示，抛出错误ElMessage.error(res.data.message || '服务异常')return Promise.reject(res.data)},(err) => {// TODO 5. 处理401错误// 错误的特殊情况 => 401 权限不足 或 token 过期 => 拦截到登录if (err.response?.status === 401) {router.push('/login')}// 错误的默认情况 => 只要给提示ElMessage.error(err.response.data.message || '服务异常')return Promise.reject(err)}
)export default instance
export { baseURL }

(8)首页整体路由设计

在这里插入图片描述

path: '/',component: () => import('@/views/layout/LayoutContainer.vue'),redirect: '/article/manage',children: [{path: '/article/manage',component: () => import('@/views/article/ArticleManage.vue')},{path: '/article/channel',component: () => import('@/views/article/ArticleChannel.vue')},{path: '/user/profile',component: () => import('@/views/user/UserProfile.vue')},{path: '/user/avatar',component: () => import('@/views/user/UserAvatar.vue')},{path: '/user/password',component: () => import('@/views/user/UserPassword.vue')}]

四.具体业务功能实现

（1）登录注册页面 [element-plus 表单 & 表单校验]

功能需求说明：
1.注册登录静态结构 & 基本切换
2.注册功能 (校验 + 注册)
3.登录功能 (校验 + 登录 + 存token)

import request from '@/utils/request'// 注册接口
export const userRegisterService = ({ username, password, repassword }) =>request.post('/api/reg', { username, password, repassword })// 登录接口
export const userLoginService = ({ username, password }) =>request.post('/api/login', { username, password })// 获取用户基本信息
export const userGetInfoService = () => request.get('/my/userinfo')

<script setup>
import { userRegisterService, userLoginService } from '@/api/user.js'
import { User, Lock } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
const isRegister = ref(false)
const form = ref()// 整个的用于提交的form数据对象
const formModel = ref({username: '',password: '',repassword: ''
})
// 整个表单的校验规则
// 1. 非空校验 required: true      message消息提示，  trigger触发校验的时机 blur change
// 2. 长度校验 min:xx, max: xx
// 3. 正则校验 pattern: 正则规则    \S 非空字符
// 4. 自定义校验 => 自己写逻辑校验 (校验函数)
//    validator: (rule, value, callback)
//    (1) rule  当前校验规则相关的信息
//    (2) value 所校验的表单元素目前的表单值
//    (3) callback 无论成功还是失败，都需要 callback 回调
//        - callback() 校验成功
//        - callback(new Error(错误信息)) 校验失败
const rules = {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 5, max: 10, message: '用户名必须是 5-10位 的字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{pattern: /^\S{6,15}$/,message: '密码必须是 6-15位 的非空字符',trigger: 'blur'}],repassword: [{ required: true, message: '请输入密码', trigger: 'blur' },{pattern: /^\S{6,15}$/,message: '密码必须是 6-15位 的非空字符',trigger: 'blur'},{validator: (rule, value, callback) => {// 判断 value 和 当前 form 中收集的 password 是否一致if (value !== formModel.value.password) {callback(new Error('两次输入密码不一致'))} else {callback() // 就算校验成功，也需要callback}},trigger: 'blur'}]
}const register = async () => {// 注册成功之前，先进行校验，校验成功 → 请求，校验失败 → 自动提示await form.value.validate()await userRegisterService(formModel.value)ElMessage.success('注册成功')isRegister.value = false
}const userStore = useUserStore()
const router = useRouter()
const login = async () => {await form.value.validate()const res = await userLoginService(formModel.value)userStore.setToken(res.data.token)ElMessage.success('登录成功')router.push('/')
}// 切换的时候，重置表单内容
watch(isRegister, () => {formModel.value = {username: '',password: '',repassword: ''}
})
</script><template><!-- 1. 结构相关el-row表示一行，一行分成24份 el-col表示列  (1) :span="12"  代表在一行中，占12份 (50%)(2) :span="6"   表示在一行中，占6份  (25%)(3) :offset="3" 代表在一行中，左侧margin份数el-form 整个表单组件el-form-item 表单的一行 （一个表单域）el-input 表单元素（输入框）2. 校验相关(1) el-form => :model="ruleForm"      绑定的整个form的数据对象 { xxx, xxx, xxx }(2) el-form => :rules="rules"         绑定的整个rules规则对象  { xxx, xxx, xxx }(3) 表单元素 => v-model="ruleForm.xxx" 给表单元素，绑定form的子属性(4) el-form-item => prop配置生效的是哪个校验规则 (和rules中的字段要对应)--><el-row class="login-page"><el-col :span="12" class="bg"></el-col><el-col :span="6" :offset="3" class="form"><!-- 注册相关表单 --><el-form:model="formModel":rules="rules"ref="form"size="large"autocomplete="off"v-if="isRegister"><el-form-item><h1>注册</h1></el-form-item><el-form-item prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="请输入用户名"></el-input></el-form-item><el-form-item prop="password"><el-inputv-model="formModel.password":prefix-icon="Lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item prop="repassword"><el-inputv-model="formModel.repassword":prefix-icon="Lock"type="password"placeholder="请输入再次密码"></el-input></el-form-item><el-form-item><el-button@click="register"class="button"type="primary"auto-insert-space>注册</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = false">← 返回</el-link></el-form-item></el-form><!-- 登录相关表单 --><el-form:model="formModel":rules="rules"ref="form"size="large"autocomplete="off"v-else><el-form-item><h1>登录</h1></el-form-item><el-form-item prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="请输入用户名"></el-input></el-form-item><el-form-item prop="password"><el-inputv-model="formModel.password"name="password":prefix-icon="Lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item class="flex"><div class="flex"><el-checkbox>记住我</el-checkbox><el-link type="primary" :underline="false">忘记密码？</el-link></div></el-form-item><el-form-item><el-button@click="login"class="button"type="primary"auto-insert-space>登录</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = true">注册 →</el-link></el-form-item></el-form></el-col></el-row>
</template><style lang="scss" scoped>
.login-page {height: 100vh;background-color: #fff;.bg {background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,url('@/assets/login_bg.jpg') no-repeat center / cover;border-radius: 0 20px 20px 0;}.form {display: flex;flex-direction: column;justify-content: center;user-select: none;.title {margin: 0 auto;}.button {width: 100%;}.flex {width: 100%;display: flex;justify-content: space-between;}}
}
</style>