前端Vue小兔鮮兒電商項目實戰Day02

一、Pinia快速入門

此處見：Vue從入門到實戰Day12-CSDN博客

二、創建項目并精細化配置

1. 創建項目

2. src目錄調整

?①刪除一些初始化的默認文件

清空assets、components、store、views文件夾下的內容；

②修改剩余代碼內容

router/index.js

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: []
})export default router

App.vue

<script setup></script><template><el-button type="primary">Primary</el-button><br />
</template><style scoped></style>

main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'// 測試接口函數
import { getCategory } from '@/apis/testAPI.js'
getCategory().then((res) => {console.log(res)
})const app = createApp(App)app.use(createPinia())
app.use(router)app.mount('#app')

3. git管理項目

基于create-vue創建出來的項目默認沒有初始化git倉庫，需要我們手動初始化。

執行命令并完成首次提交

①git init
②git add .?
③git commit -m "init"

4.?Eslint配置代碼風格

配置文件：.eslintrc.cjs

1. prettier 風格配置 https://prettier.io

2. vue組件名稱多單詞組成（忽略index.vue)

3. props解構（關閉）

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')module.exports = {root: true,'extends': ['plugin:vue/vue3-essential','eslint:recommended','@vue/eslint-config-prettier/skip-formatting'],parserOptions: {ecmaVersion: 'latest'},rules: {// prettier專注于代碼的美觀度 (格式化工具)// 前置：// 1. 禁用格式化插件 prettier  format on save 關閉// 2. 安裝Eslint插件, 并配置保存時自動修復'prettier/prettier': ['warn',{singleQuote: true, // 單引號semi: false, // 無分號printWidth: 80, // 每行寬度至多80字符trailingComma: 'none', // 不加對象|數組最后逗號endOfLine: 'auto' // 換行符號不限制（win mac 不一致）}],// ESLint關注于規范, 如果不符合規范，報錯'vue/multi-word-component-names': ['warn',{ignores: ['index'] // vue組件名稱多單詞組成（忽略index.vue）}],'vue/no-setup-props-destructure': ['off'], // 關閉 props 解構的校驗 (props解構丟失響應式)// 添加未定義變量錯誤提示，create-vue@3.6.3 關閉，這里加上是為了支持下一個章節演示。'no-undef': 'error'}
}

前提條件：安裝Eslint插件且配置保存修復，不要開啟默認的自動保存格式化，把Prettier - Code formatter插件禁用。

settings.json

{"workbench.colorTheme": "Default Light+","[html]": {"editor.defaultFormatter": "vscode.html-language-features"},"emmet.triggerExpansionOnTab": true,// "[vue]": {//    "editor.defaultFormatter": "Vue.volar"// },// 當保存的時候，eslint自動幫我們修復錯誤"editor.codeActionsOnSave": {"source.fixAll": "explicit"},// 保存代碼，不自動格式化"editor.formatOnSave": false
}

5. 配置代碼檢查工作流

1. 初始化husky工具配置，執行?pnpm dlx husky-init && pnpm install?即可

2. 安裝lint-staged包

pnpm i lint-staged -D

3.?package.json配置lint-staged命令

{······"prepare": "husky install","lint-staged": "lint-staged"},······"devDependencies": {······},"lint-staged": {"*.{js,ts,vue}": ["eslint --fix"]}
}

4.?.husky/pre-commit文件修改

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"pnpm lint-staged

6. 項目起步 - 配置別名路徑聯想提示

什么是別名路徑聯想提示

在編寫代碼的過程中，一旦輸入 @/，VSCode會立刻聯想出src下的所有子目錄和文件，統一文件訪問路徑，不容易出錯。

如何進行配置

1. 在項目的根目錄下新增jsconfig.json文件

2. 添加json格式的配置項，如下：（現在的Vue已經自動生成）

{"compilerOptions": {"paths": {"@/*": ["./src/*"]}},"exclude": ["node_modules", "dist"]
}

這個只是做一個聯想提示的功能，實際的路徑轉換由vite.config.js實現

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()],resolve: {// 實際的路徑轉換 @ -> srcalias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

7. 項目起步 - elementPlus引入

1. 按需引入Element Plus

pnpm add element-plus

2. 配置按需引入

①首先，安裝unplugin-vue-components?和?unplugin-auto-import這兩款插件

pnpm add -D unplugin-vue-components unplugin-auto-import

②修改配置文件：vite.config.js

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({// base: '/jd',plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

8. 項目起步 - elementPlus主題定制

為什么需要主題定制

小兔鮮主題色和elementPlus默認的主題色存在沖突，通過定制主題讓elementPlus的主題色和小兔鮮項目保持一致。

如何定制（scss變量替換方案）

①安裝sass

pnpm add sass -D

②準備定制化的樣式文件 - src/styles/element/index.scss

/* 只需要重寫你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': (// 主色'base': #27ba9b,),'success': (// 成功色'base': #1dc779,),'warning': (// 警告色'base': #ffb302,),'danger': (// 危險色'base': #e26237,),'error': (// 錯誤色'base': #cf4444,),)
)

③自動導入配置 - vite.config.js

pnpm add unplugin-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'
// 導入對應包
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()]}),Components({// 配置elementPlus采用sass樣式配色系統resolvers: [ElementPlusResolver({ importStyle: 'sass' })]}),// 按需定制主題配置ElementPlus({useSource: true})],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},css: {preprocessorOptions: {scss: {// 自動導入定制化樣式文件進行樣式覆蓋additionalData: `@use "@/styles/element/index.scss" as *;`}}}
})

9. axios安裝并簡單封裝

1. 安裝axios

pnpm add axios

2. 基礎配置

起步 |?Axios Docs

src/utils/http.js

import axios from 'axios'// 創建axios實例
const instance = axios.create({baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',timeout: 5000
})// axios請求攔截器
instance.interceptors.request.use((config) => {return config},(e) => Promise.reject(e)
)// axios響應式攔截器
instance.interceptors.response.use((res) => res.data,(e) => {return Promise.reject(e)}
)export default instance

3. 封裝請求函數并測試

src/apis/testAPI.js

import instance from '@/utils/http'export function getCategory() {return instance({// 默認為get方式請求url: 'home/category/head'})
}

main.js

import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'// 測試接口函數
import { getCategory } from '@/apis/testAPI.js'
getCategory().then((res) => {console.log(res)
})const app = createApp(App)app.use(createPinia())
app.use(router)app.mount('#app')

4. 思考

如果項目里面不同的業務模塊需要的接口基地址不同，該如何來做？

答：axios.create()方法可以執行多次，每次執行就會生成一個新的實例，比如：

const instance1 = axios.create({ baseURL: 'url1' })
const instance2 = axios.create({ baseURL: 'url2' })

10.? 項目起步 - 項目路由設計

1. 設計首頁和登錄頁的路由（一級路由）

路由設計原則：按內容切換的區域，如果是頁面整體切換，則為一級路由

①新增兩個文件

src/view/Login/index.vue

<template><div>我是登錄頁</div>
</template>

src/views/Layout/index.vue

<template><div>我是首頁</div>
</template>

②router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',component: Layout},{path: '/login',component: Login}]
})export default router

③App.vue

<script setup></script><template><!-- 一級路由出口 --><router-view></router-view>
</template><style scoped></style>

2. 設計分類頁和默認Home頁路由（二級路由）

路由設計原則：找內容切換的區域，如果是在一級路由頁的內部切換，則為二級路由

①新增兩個文件

src/views/Category/index.vue

<template><div>我是分類頁</div>
</template>

src/views/Home/index.vue

<template><div>我是Home頁</div>
</template>

②配置路由

router/index.js

// createRouter：創建router實例對象
// createWebHistory：創建history模式的路由import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'
import Home from '@/views/Home/index.vue'
import Category from '@/views/Category/index.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),// path和component對應關系的位置routes: [{path: '/',component: Layout,children: [{path: '',component: Home},{path: 'category',component: Category}]},{path: '/login',component: Login}]
})export default router

③配置二級路由出口

src/views/Layout/index.vue

<template><div>我是首頁<!-- 二級路由出口 --><RouterView /></div>
</template>

3. 總結

①路由設計的依據是什么？

答：內容切換的方式

②默認二級路由如何進行設置？

答：path配置項置空

11. 項目起步 - 靜態資源初始化和 Error Lens安裝

1. 圖片資源和樣式資源

1. 實際工作中的圖片資源通常由UI設計師提供，常見的圖片格式有png, svg等都是由UI切圖交給前端

2. 樣式資源通常是指項目初始化的時候進行樣式重置，常見的比如開源的 normalize.css 或者手寫

①資源操作

?圖片資源 - 把images文件夾放到assets目錄下
?樣式資源 - 把common.scss文件放到styles目錄下

②引入初始化樣式文件 - main.js

// 引入初始化樣式文件
import '@/styles/common.scss'

2. error lens安裝

error lens是一個實時提供錯誤警告信息的VScode插件，方便開發

12. 項目起步 - scss文件自動導入

為什么要自動導入

在項目里一些組件共享的色值會以scss變量的方式統一放到一個名為var.scss的文件中，正常組件中使用，需要先導入scss文件，再使用內部的變量，比較繁瑣，自動導入可以免去手動導入的步驟，直接使用內部的變量。

自動導入配置

新增一個var.scss文件，存入色值變量

$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;

通過vite.config.js配置自動導入文件

  css: {preprocessorOptions: {scss: {// 自動導入定制化樣式文件進行樣式覆蓋additionalData: `@use "@/styles/element/index.scss" as *;@use "@/styles/var.scss" as *;`}}}

測試使用 - App.vue

<script setup></script><template><!-- 路由出口 --><router-view></router-view><div class="test">test scss</div>
</template><style lang="scss" scoped>
.test {color: $priceColor;
}
</style>

三、Layout模塊靜態模板搭建

1. 組件結構快速搭建

src/views/Layout/components/LayoutNav.vue

<script setup></script><template><nav class="app-topnav"><div class="container"><ul><template v-if="true"><li><a href="javascript:;"><i class="iconfont icon-user"></i>周杰倫</a></li><li><el-popconfirmtitle="確認退出嗎?"confirm-button-text="確認"cancel-button-text="取消"><template #reference><a href="javascript:;">退出登錄</a></template></el-popconfirm></li><li><a href="javascript:;">我的訂單</a></li><li><a href="javascript:;">會員中心</a></li></template><template v-else><li><a href="javascript:;">請先登錄</a></li><li><a href="javascript:;">幫助中心</a></li><li><a href="javascript:;">關于我們</a></li></template></ul></div></nav>
</template><style scoped lang="scss">
.app-topnav {background: #333;ul {display: flex;height: 53px;justify-content: flex-end;align-items: center;li {a {padding: 0 15px;color: #cdcdcd;line-height: 1;display: inline-block;i {font-size: 14px;margin-right: 2px;}&:hover {color: $xtxColor;}}~ li {a {border-left: 2px solid #666;}}}}
}
</style>

src/views/Layout/components/LayoutHeader.vue

<script setup></script><template><header class='app-header'><div class="container"><h1 class="logo"><RouterLink to="/">小兔鮮</RouterLink></h1><ul class="app-header-nav"><li class="home"><RouterLink to="/">首頁</RouterLink></li><li> <RouterLink to="/">居家</RouterLink> </li><li> <RouterLink to="/">美食</RouterLink> </li><li> <RouterLink to="/">服飾</RouterLink> </li></ul><div class="search"><i class="iconfont icon-search"></i><input type="text" placeholder="搜一搜"></div><!-- 頭部購物車 --></div></header>
</template><style scoped lang='scss'>
.app-header {background: #fff;.container {display: flex;align-items: center;}.logo {width: 200px;a {display: block;height: 132px;width: 100%;text-indent: -9999px;background: url('@/assets/images/logo.png') no-repeat center 18px / contain;}}.app-header-nav {width: 820px;display: flex;padding-left: 40px;position: relative;z-index: 998;li {margin-right: 40px;width: 38px;text-align: center;a {font-size: 16px;line-height: 32px;height: 32px;display: inline-block;&:hover {color: $xtxColor;border-bottom: 1px solid $xtxColor;}}.active {color: $xtxColor;border-bottom: 1px solid $xtxColor;}}}.search {width: 170px;height: 32px;position: relative;border-bottom: 1px solid #e7e7e7;line-height: 32px;.icon-search {font-size: 18px;margin-left: 5px;}input {width: 140px;padding-left: 5px;color: #666;}}.cart {width: 50px;.curr {height: 32px;line-height: 32px;text-align: center;position: relative;display: block;.icon-cart {font-size: 22px;}em {font-style: normal;position: absolute;right: 0;top: 0;padding: 1px 6px;line-height: 1;background: $helpColor;color: #fff;font-size: 12px;border-radius: 10px;font-family: Arial;}}}
}
</style>

src/views/Layout/components/LayoutFooter.vue

<template><footer class="app_footer"><!-- 聯系我們 --><div class="contact"><div class="container"><dl><dt>客戶服務</dt><dd><i class="iconfont icon-kefu"></i> 在線客服</dd><dd><i class="iconfont icon-question"></i> 問題反饋</dd></dl><dl><dt>關注我們</dt><dd><i class="iconfont icon-weixin"></i> 公眾號</dd><dd><i class="iconfont icon-weibo"></i> 微博</dd></dl><dl><dt>下載APP</dt><dd class="qrcode"><img src="@/assets/images/qrcode.jpg" /></dd><dd class="download"><span>掃描二維碼</span><span>立馬下載APP</span><a href="javascript:;">下載頁面</a></dd></dl><dl><dt>服務熱線</dt><dd class="hotline">400-0000-000 <small>周一至周日 8:00-18:00</small></dd></dl></div></div><!-- 其它 --><div class="extra"><div class="container"><div class="slogan"><a href="javascript:;"><i class="iconfont icon-footer01"></i><span>價格親民</span></a><a href="javascript:;"><i class="iconfont icon-footer02"></i><span>物流快捷</span></a><a href="javascript:;"><i class="iconfont icon-footer03"></i><span>品質新鮮</span></a></div><!-- 版權信息 --><div class="copyright"><p><a href="javascript:;">關于我們</a><a href="javascript:;">幫助中心</a><a href="javascript:;">售后服務</a><a href="javascript:;">配送與驗收</a><a href="javascript:;">商務合作</a><a href="javascript:;">搜索推薦</a><a href="javascript:;">友情鏈接</a></p><p>CopyRight ? 小兔鮮兒</p></div></div></div></footer>
</template><style scoped lang='scss'>
.app_footer {overflow: hidden;background-color: #f5f5f5;padding-top: 20px;.contact {background: #fff;.container {padding: 60px 0 40px 25px;display: flex;}dl {height: 190px;text-align: center;padding: 0 72px;border-right: 1px solid #f2f2f2;color: #999;&:first-child {padding-left: 0;}&:last-child {border-right: none;padding-right: 0;}}dt {line-height: 1;font-size: 18px;}dd {margin: 36px 12px 0 0;float: left;width: 92px;height: 92px;padding-top: 10px;border: 1px solid #ededed;.iconfont {font-size: 36px;display: block;color: #666;}&:hover {.iconfont {color: $xtxColor;}}&:last-child {margin-right: 0;}}.qrcode {width: 92px;height: 92px;padding: 7px;border: 1px solid #ededed;}.download {padding-top: 5px;font-size: 14px;width: auto;height: auto;border: none;span {display: block;}a {display: block;line-height: 1;padding: 10px 25px;margin-top: 5px;color: #fff;border-radius: 2px;background-color: $xtxColor;}}.hotline {padding-top: 20px;font-size: 22px;color: #666;width: auto;height: auto;border: none;small {display: block;font-size: 15px;color: #999;}}}.extra {background-color: #333;}.slogan {height: 178px;line-height: 58px;padding: 60px 100px;border-bottom: 1px solid #434343;display: flex;justify-content: space-between;a {height: 58px;line-height: 58px;color: #fff;font-size: 28px;i {font-size: 50px;vertical-align: middle;margin-right: 10px;font-weight: 100;}span {vertical-align: middle;text-shadow: 0 0 1px #333;}}}.copyright {height: 170px;padding-top: 40px;text-align: center;color: #999;font-size: 15px;p {line-height: 1;margin-bottom: 20px;}a {color: #999;line-height: 1;padding: 0 10px;border-right: 1px solid #999;&:last-child {border-right: none;}}}
}
</style>

在src/views/Layout/index.vue中導入

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

四、頁面渲染

1. 字體圖標渲染

iconfont-阿里巴巴矢量圖標庫

字體圖標采用的是阿里的字體圖標庫，樣式文件已經準備好，在index.html文件中引入即可

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小兔鮮</title>
</head><body><div id="app"></div><script type="module" src="/src/main.js"></script>
</body></html>

2. 一級導航渲染

1. 封裝接口函數 - src/api/layout.js

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

2. 調用接口函數 - src/views/Layout/components/LayoutHeader.vue

3. v-for渲染模板

<script setup>
import { getCategoryAPI } from '@/apis/layout.js'
import { ref } from 'vue'const categoryList = ref([])
const getCategory = async () => {const res = await getCategoryAPI()categoryList.value = res.result
}// 一進頁面就調用
getCategory()
</script><template><header class="app-header"><div class="container"><h1 class="logo"><RouterLink to="/">小兔鮮</RouterLink></h1><ul class="app-header-nav"><li class="home" v-for="item in categoryList" :key="item.id"><RouterLink to="/">{{ item.name }}</RouterLink></li></ul><div class="search"><i class="iconfont icon-search"></i><input type="text" placeholder="搜一搜" /></div><!-- 頭部購物車 --></div></header>
</template>

五、吸頂導航交互實現

吸頂交互

要求：瀏覽器在上下滾動的過程中，如果距離頂部的滾動距離大于78px，吸頂導航顯示，小于78px隱藏

1. 準備組件靜態結構

src/views/Layout/components/LayoutFixed.vue

<script setup></script><template><div class="app-header-sticky show"><div class="container"><RouterLink class="logo" to="/" /><!-- 導航區域 --><ul class="app-header-nav"><li class="home"><RouterLink to="/">首頁</RouterLink></li><li><RouterLink to="/">居家</RouterLink></li><li><RouterLink to="/">美食</RouterLink></li><li><RouterLink to="/">服飾</RouterLink></li><li><RouterLink to="/">母嬰</RouterLink></li><li><RouterLink to="/">個護</RouterLink></li><li><RouterLink to="/">嚴選</RouterLink></li><li><RouterLink to="/">數碼</RouterLink></li><li><RouterLink to="/">運動</RouterLink></li><li><RouterLink to="/">雜項</RouterLink></li></ul><div class="right"><RouterLink to="/">品牌</RouterLink><RouterLink to="/">專題</RouterLink></div></div></div>
</template><style scoped lang="scss">
.app-header-sticky {width: 100%;height: 80px;position: fixed;left: 0;top: 0;z-index: 999;background-color: #fff;border-bottom: 1px solid #e4e4e4;// 此處為關鍵樣式!!!// 狀態一：往上平移自身高度 + 完全透明transform: translateY(-100%);opacity: 0;// 狀態二：移除平移 + 完全不透明&.show {transition: all 0.3s linear;transform: none;opacity: 1;}.container {display: flex;align-items: center;}.logo {width: 200px;height: 80px;background: url('@/assets/images/logo.png') no-repeat right 2px;background-size: 160px auto;}.right {width: 220px;display: flex;text-align: center;padding-left: 40px;border-left: 2px solid $xtxColor;a {width: 38px;margin-right: 40px;font-size: 16px;line-height: 1;&:hover {color: $xtxColor;}}}
}.app-header-nav {width: 820px;display: flex;padding-left: 40px;position: relative;z-index: 998;li {margin-right: 40px;width: 38px;text-align: center;a {font-size: 16px;line-height: 32px;height: 32px;display: inline-block;&:hover {color: $xtxColor;border-bottom: 1px solid $xtxColor;}}.active {color: $xtxColor;border-bottom: 1px solid $xtxColor;}}
}
</style>

src/views/Layout/index.vue中導入

<script setup>
import LayoutNav from './components/LayoutNav.vue'
import LayoutHeader from './components/LayoutHeader.vue'
import LayoutFooter from './components/LayoutFooter.vue'
import LayoutFixed from './components/LayoutFixed.vue'
</script><template><LayoutFixed /><LayoutNav /><LayoutHeader /><RouterView /><LayoutFooter />
</template>

2. 獲取滾動距離

Get Started | VueUse?|?useScroll | VueUse

①安裝

pnpm add @vueuse/core

②導入使用 - src/views/Layout/components/LayoutFixed.vue

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

③模擬 - src/views/Home/index.vue

<template><div>我是Home頁</div><div style="height: 500px"></div>
</template>

3. 以滾動距離做判斷條件控制組件

LayoutFixed.vue

<div class="app-header-sticky" :class="{ show: y > 78 }">

六、Pinia優化重復請求

1. 如何優化

2. 實現

①src/stores/category.js

import { ref } from 'vue'
import { defineStore } from 'pinia'
import { getCategoryAPI } from '@/apis/layout.js'
export const useCategoryStore = defineStore('category', () => {// 導航列表的數據管理const categoryList = ref([])const getCategory = async () => {const res = await getCategoryAPI()categoryList.value = res.result}return { categoryList, getCategory }
})

②src/views/Layout/index.vue

<script setup>
// ......
import { useCategoryStore } from '@/stores/category.js'// 觸發獲取導航列表的action
const categoryStore = useCategoryStore()
// 一進頁面就調用
categoryStore.getCategory()
</script>

③組件中使用數據

LayoutFixed.vue

<script setup>
import { useScroll } from '@vueuse/core'
import { useCategoryStore } from '@/stores/category.js'
const { y } = useScroll(window)// 使用pinia中的數據
const categoryStore = useCategoryStore()
</script><template><div class="app-header-sticky" :class="{ show: y > 78 }"><!-- {{ y }} --><div class="container"><RouterLink class="logo" to="/" /><!-- 導航區域 --><ul class="app-header-nav"><liclass="home"v-for="item in categoryStore.categoryList":key="item.id"><RouterLink to="/">{{ item.name }}</RouterLink></li></ul><div class="right"><RouterLink to="/">品牌</RouterLink><RouterLink to="/">專題</RouterLink></div></div></div>
</template>

LayoutHeader.vue

<script setup>
import { useCategoryStore } from '@/stores/category.js'
// 使用pinia中的數據
const categoryStore = useCategoryStore()
</script><template><header class="app-header"><div class="container"><h1 class="logo"><RouterLink to="/">小兔鮮</RouterLink></h1><ul class="app-header-nav"><liclass="home"v-for="item in categoryStore.categoryList":key="item.id"><RouterLink to="/">{{ item.name }}</RouterLink></li></ul><div class="search"><i class="iconfont icon-search"></i><input type="text" placeholder="搜一搜" /></div><!-- 頭部購物車 --></div></header>
</template>