Vue3 小兔鲜：Layout-静态模版结构搭建

Vue3 小兔鲜4：Layout-静态模版结构搭建

Date: May 31, 2023

---

目标效果：

分成Nav、Heade、二级路由出口、Footer区域

---

---

---

组件结构快速搭建

Nav

Header

Footer

index.vue

---

---

---

字体图标渲染

效果：

具体操作：

1. 在index.html中导入图标库

   字体图标采用的是阿里的字体图标库，样式文件已经准备好，在 index.html文件中引入即可

  <link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css"> 

1. 在标签中具体使用即可

---

---

---

一级导航渲染

使用后端接口渲染一级路由导航：

实现步骤

1. 封装接口函数
2. 调用接口函数
3. v-for渲染模版

代码落地

import httpInstance from '@/utils/http'
export function getCategoryAPI () {  
	return httpInstance({   
		 url: '/home/category/head'  
	})
}

---

---

---

吸顶导航交互实现

吸顶交互要求：

页面在上下滚动的过程中，如果距离顶部的滚动距离大手78pX，吸顶导航显示，小于78px隐藏

实现思路：

准备吸顶导航组件⇒获取滚动距离⇒以滚动距离做判断条件控制组件盒子展示隐藏

1. 准备组件静态结构

实现步骤：

1. 搞定顶吸组件：LayoutFixed.vue

效果：

---

---

2. 渲染基础数据

原始代码：

• Code

这里我们修改一下，通过v-for进行循环:

LayoutFixed.vue

  {{ item.name }}

---

---

3. 实现吸顶交互

核心逻辑：根据滚动距离判断当前show类名是否显示，大于78显示，小于78，不显示

---

---

---

Pinia优化重复请求

问题：

两个导航中的列表是完全一致的，但是要发送两次网络请求，存在浪费。

优化方式：

通过Pinia集中管理数据，再把数据给组件使用。值的注意的是，我们会在两个子组件的公共父组件中把action触发起来，这样能够保证这个action只会触发一次。

代码：

import { ref } from 'vue'
import { defineStore } from 'pinia'
import { getCategoryAPI } from '@/apis/layout'
export const useCategoryStore = defineStore('category', () => {  
	// 导航列表的数据管理  
	// state 导航列表数据  
	const categoryList = ref([])  
	// action 获取导航数据的方法  
	const getCategory = async () => {    
		const res = await getCategoryAPI()    
		categoryList.value = res.result  
	}  
	return {    
			categoryList, getCategory  
	}
})