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