黑马小兔鲜Vue3电商平台技术总结

Vue3电商平台

1.使用相关技术栈

create-vue, Vue3+Setup, VueRouter, VueUse, pinia

创建项目：npm init vue@latest

引入elementPlus：npm i elementPlus 配置插件 npm install -D unplugin-vue-components unplugin-auto-import

定制主题，安装sass：npm i sass -D，在src/styles和vite.config.js中进行相关配置

图片静态资源：assets/images 样式资源：styles

安装axios：npm i axios。在src/utils/http.js中实例化 - baseURL + timeout，拦截器 - 携带token 401拦截等

路由设计：整体切换为一级路由，在一级路由下切换为二级路由，以此类推。

Pinia添加：create init vue@latest

npm install pinia

2.相关模块和组件实现

长页面吸顶交互,使用pinia(state,action)优化重复请求

vueuse中useScroll LayoutFixed.vue

准备吸顶导航组件——获取滚动距离——以滚动距离做判断条件来控制组件显示还是隐藏

pinia中的action由Layout共同组件触发（在index.vue中触发获取），state用pinia管理下发给Layout组件

stores中编写导航列表数据管理，统一在LayoutHeaderUI中创建实例化对象调用，再分别在Fixed和Header中引入LayoutHeaderUI并调用。

图片懒加载指令封装,以及重复监听造成内存浪费，使用stop在监听的图片第一次完成加载之后就停止监听

指令<img v-img-lazy="item.picture">

通过插件的方法把懒加载指令封装为插件，main.js入口文件只需要负责注册插件

判断图片是否进入视口（vueUse），测试图片监控是否生效，测试图片资源是否发出，如果图片进入视口，发送图片资源请求(img.src=url)

import { useIntersectionObserver } from '@vueuse/core'

路由缓存 , 将同组件中独立的业务代码通过函数做封装处理

带有参数的路由在使用时，当用户从一个地址导航到另一个地址时，相同的组件实例将被重复使用，生命周期打断，onMounted不执行。因为两个路由都渲染同一个组件，分类数据无法更新（只有参数变化，默认走缓存复用实例）。Layout/index.vue

1.让组件实例不复用，强制重建给router-view添加key <RouterView :key="$route.fullPath" />

2.监听路由变化，变化后执行数据更新操作(使用beforeRouteUpdate导航钩子),在每次路由更新前执行，在回调中执行需要数据更新新的业务逻辑（category）使用to.params.id如果传了参数就最新的，如果没传就用默认的

把独立的业务逻辑封装到各个函数内部（category/composables/useBanner.js|useCategory.js），函数内部将组件中需要用到的数据或方法return出去，在组件setup中调用函数把数据或方法组合回来使用

图片预览组件，放大镜效果

1.一个数组图片列表，鼠标划入小图记录当前小图下标值（绑定事件），通过下标值(i)在数组中取对应图片(:class="{ active: i === activeIndex })，显示激活到大图（src/components/ImageView/index.vue）

1.滑块跟随移动(vueUse获取相对位置useMouseInElement)

import { useMouseInElement } from '@vueuse/core'

有效一栋范围 ：横向：100<elementX<300,left=elementX(只有一半)

纵向：100<elementY<300,top=elementY

边界距离控制：横向：elementX>300 left=200 elementX<100 left=0

纵向：elementY>300 top=200 elementY<100 top=0

2.大图：大图移动方向和滑块移动方向相反，且数值为2倍

3.移入控制滑块和大图显示隐藏

使用pinia管理用户数据，pinia数据持久化

和数据有关的操作（state+action）都放进Pinia中，组件只负责触发action函数

(stores/userStore.js）:import { defineStore } from 'pinia' 1.定义管理用户数据的state,定义获取接口数据的action函数3.以对象的格式把state和action return

(Login/index.vue)：import { useUserStore } from '@/stores/userStore' 创建实例，触发action函数，调用接口，数据传进。

用户数据中的Token，Token持续一段时间才会过期，而pinia的存储是基于内存的，刷新就丢失，需要配合持久化进行存储。

1.操作state时会自动把数据存在本地的localStorage，刷新的时候会从localStorage中先取

插件：npm i pinia-plugin-persistedstate

在main.js中注册插件

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()

pinia.use(piniaPluginPersistedstate)

在userStore.js中添加{

persist: true,

}

购物车单选，全选

单选：

始终将单选框的状态和pinia中的store对应的状态保持同步

（v-model双向绑定指令不方便进行命令式操作，使用model-value+@change的配合）

index.vue：

const singleCheck = (i, selected) => {

console.log(i, selected)

// store cartList 数组 无法知道要修改谁的选中状态？

cartStore.singleCheck(i.skuId, selected)

}

<el-checkbox :model-value="i.selected" @change="(selected) => singleCheck(i, selected)" />

cartStore.js：

const singleCheck = (skuId, selected) => {

// 通过skuId找到要修改的那一项 然后把它的selected修改为传过来的selected

const item = cartList.value.find((item) => item.skuId === skuId)

item.selected = selected

}

全选：

只有cartList中的所有项都是true时，全选状态才为true 且操作全选时cartList中的所有项的selected都要 一起变

先在cartStore.js中判断是否全选， return出去isAll

const allCheck = (selected) => {

// 把cartList中的每一项的selected都设置为当前的全选框状态

cartList.value.forEach(item => item.selected = selected)

}

const allCheck = (selected) => {

cartStore.allCheck(selected)

}

通用逻辑函数封装（倒计时）

const { formatTime, start } = useCountDown()

{{ formatTime }}

start(60)

views/pay/index.vue composables/useCountDown.js