vue3项目（二）---Layout

1. Layout静态模板结构的搭建

 步骤：

1）创建LayoutNav、LayoutHeader、LayoutFooter三个组件

 在组件里导入静态页面。

2）在Layout组件中引入

//src/views/Layout
<script setup>
import LayoutNav from './components/LayoutNav.vue'
import LayoutHeader from './components/LayoutHeader.vue'
import LayoutFooter from './components/LayoutFooter.vue'
</script>

<template>
  <LayoutNav />
  <LayoutHeader />
  <RouterView />
  <LayoutFooter />
 
</template>

2.字体图标渲染

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

3. 一级导航的渲染

步骤

1） 根据接口文档封装接口函数

先在apis下创建layout.js文件

//src/apis/layout.js
import httpInstance from '@/utils/http'
export function getCategoryAPI(){
    // 因为是get 请求，所以可以省略不写method:get
    return httpInstance({url:'/home/category/head'})
}

2） 发送请求获取数据列表

//src/views/Layout/index.vue
<script setup>
  import { getCategoryAPI } from '@/apis/layout'
  import { onMounted, ref } from 'vue'

  const categoryList = ref([])
  const getCategory = async () => {
    const res = await getCategoryAPI()
    categoryList.value = res.result
  }

  onMounted(() => getCategory())

</script>

3） v-for渲染页面

4. 吸顶导航交互实现

需求：浏览器在上下滚动的过程中，如果距离顶部的滚动距离大于78px，吸顶导航显示，小于78px隐藏。

步骤：

1）准备吸顶导航组件（LayoutFixed）

 和前面一样，先引入静态页面，再在Layout组件中引入。

2）获取滚动的距离（使用VueUse插件）

先安装：npm i @vueuse/core

//src/views/Layout/components/LayoutFixed.vue

<script setup>
// vueUse
import { useScroll } from '@vueuse/core'
const { y } = useScroll(window)
</script>

3）实现吸顶交互

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

//src/views/Layout/components/LayoutFixed.vue

<template>
  <div class="app-header-sticky" :class="{ show: y > 78 }">
    <!-- 省略部分代码 -->
  </div>
</template>

5. Pinia优化重复请求

因为吸顶导航和LayoutHeader区域的列表是完全一致的，但是要发送俩次网络请求，存在浪费。通过Pinia集中管理数据，再把数据给组件使用。

 步骤：

1）在store下创建category.js文件

//src/stores/category.js

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
    }
})

2）首先在layoutFixed组件中使用pinia

//src/views/Layout/components/LayoutFixed.vue
<script setup>
import { useCategoryStore } from '@/stores/category';
// 使用pinia中的数据
const categoryStore=useCategoryStore()
</script>

注意：记得更改categoryList的来源。

 LayoutHeader组件一样