深圳seo网站优化公司,自建站 外贸,友情链接代码,wordpress注册密码忘记购物车案例
准备工作 首页默认加载#xff0c;其余页面懒加载 调用defineStore方法构建store 入口main做对应配置#xff0c;找指南#xff0c;快速开始#xff0c;把elementplus引入进来
import { createApp } from vue;
import { createPinia } from 其余页面懒加载 调用defineStore方法构建store 入口main做对应配置找指南快速开始把elementplus引入进来
import { createApp } from vue;
import { createPinia } from pinia;
import ./style.css;
import App from ./App.vue;
import router from ./router;
import ElementPlus from element-plus;
import element-plus/dist/index.css;
const app createApp(App);
const pinia createPinia();
app.use(router);
app.use(pinia);
app.use(ElementPlus);
app.mount(#app); api就是用来模拟后台接口的
在app.vue中做购物车首页头部不进入路由在头部的底部放RouterView给app 的header添加插槽#header写类名添加样式头部插槽内的内容不会发生变化
templatedivel-card classbox-cardtemplate #headerdiv classcard-headerh1购物车首页/h1div classbtnRouterLink to/productlistel-button typeprimary商品列表/el-button/RouterLinkRouterLink to/shoppingcarel-button typeprimary购物车/el-button/RouterLink/div/div/templateRouterView //el-card/div
/template 写购物车首页的标题写el-button商品列表购物车。并用routerLink包裹做一个导航并为RouterLink添加to页面
在商品列表页面写一个el-table
templatediv classproduct-listel-table :datashoppingCarStore.productList stripe stylewidth: 100%el-table-column propid label序号 aligncenter /el-table-column proptitle label商品名称 aligncenter /el-table-column propprice label商品价格 aligncenter /el-table-column propnumber label库存 aligncenter /el-table-column propaddress label操作 aligncentertemplate #defaultscopeel-button typesuccess clickadd(scope.row)添加到购物车/el-button/template/el-table-column/el-table/div/template
在store中写方法初始化商品列表和初始化商品数据的方法
import { defineStore } from pinia;
import { computed, ref } from vue;
import { getProducts } from ../api/product;
import { ElMessage } from element-plus;
import { buyProducts } from ../api/product.js;
const useShoppingCarStore defineStore(shopping-car, () {//初始化商品列表数据const productList ref([]);//初始化购物车列表数据const shopCarList ref([]); 一秒钟之后获取到数据模拟从接口获取数据
//1s中之后返回数组数据
export const getProducts async (){//为了模拟真实的接口请求await wait(1000)return products
} 方法在数据获取的部分有定义。把两个需要给视图使用的方法从store中导出并在商品列表中导入方法绑定在table中
给table添加按钮 改变button样式绑定add方法在页面中传参scope.row代表点选的那一行。scope代表插槽的作用域在方法中传参row
script setup
import { useShoppingCarStore } from ../store;
const shoppingCarStore useShoppingCarStore();
shoppingCarStore.getProductList();
function add(row) {//调用 将数据添加到购物车的方法shoppingCarStore.addShopCarList(row);
}
/script
在store中写给购物车添加数据的方法 减去商品列表页面的库存res的item id row id时下转判断判断完自减--添加购物车列表页面的商品数量_res的item id row id时下转判断 在store中定义初始化购物车列表判断购物车中是否已经存在这个商品如果存在将商品数量1_res.number如果没有添加一个新商品(起始数量一定是1 判断当库存1写一个提示商品已经妹有了存在一秒。导出方法并在列表页调用放在add方法中add传入的参数为row指在点选的那一行。
const useShoppingCarStore defineStore(shopping-car, () {//初始化两行
......//初始化商品列表数据的方法使用async方法没有一大堆回调函数const getProductList async () {const res await getProducts();productList.value res;};// const getProductList () {// getProducts().then((res) {// productList.value res;// });// };//给购物车添加数据的方法const addShopCarList (row) {//1. 减去商品列表页面的商品库存const res productList.value.find((item) item.id row.id);if (res.number 1) {ElMessage.error({message: 没有库存辣!,duration: 1000,});return;}res.number--;//2. 添加购物车列表页面的商品数量const _res shopCarList.value.find((item) item.id row.id);//2.1 判断购物车列表数据中是否包含当前的商品 如果包含 让数量自增//2.2 如果不包含 将这个商品添加到购物车列表if (!_res) {shopCarList.value.push({id: row.id,title: row.title,price: row.price,number: 1,});} else {_res.number;}//给购物车列表中的商品按照id的升序做一个排序shopCarList.value.sort((a, b) {return a.id - b.id;});};
...return{...addShopCarList,...};
在购物车列表中写el-table 引入useshoppingcarstore并绑定数据.shopCarList绑定prop属性表示绑定了哪个属性
在store中添加排序功能商品加入购物车后按照id自动排序写在_res判断下面 shopCarList.value.sort((a,b) {})
getProductsList方法最好使用async和await语法而不是等价的.then。因为async和await语法不涉及大量的回调函数也就不用进行大量的回调函数嵌套处理起来更简单不容易出错。
//初始化商品列表数据的方法const getProductList async () {const res await getProducts();productList.value res;};// const getProductList () {// getProducts().then((res) {// productList.value res;// });// };
写普通的table计算shopCarList里的商品总价 使用computed计算属性计算商品总价。const一个totalPrice
const useShoppingCarStore defineStore(shopping-car, () {//初始化商品列表数据
......//计算shopcarList里的商品总价const totalPrice computed(() {//reducereturn shopCarList.value.reduce((pre, cur) {return pre cur.number * cur.price;}, 0);});.....return {...totalPrice,...};
}); return一个reduce方法它是一个数组遍历中常用的方法。第一个参数为回调逻辑第二个参数为累加初始值大多数为0 把商品总价渲染到页面
在商品列表页写一个结算商品的button 绑定点击事件calcvue2不能直接绑click需要加字符vue3的组件绑定会判断是否为原生事件在store中写calc方法结算方法已经写在products中引入到store中。该方法通过一个随机数来随机判断结算是否成功。、这是一个异步方法需要async和await判断结算是否成功成功弹出成功并清空数组结算失败弹出失败不清空列表需要再次结算。
const useShoppingCarStore defineStore(shopping-car, () {......//结算商品列表的方法const calc async () {const res await buyProducts();if (res) {ElMessage.success({message: 结算成功,duration: 1000,});shopCarList.value [];} else {ElMessage.error({message: 结算失败,duration: 1000,});}};return {....calc,};
});
购物车中对结算框v-if判断如果购物车列表没有数据则不显示结算框。
templatediv classshopping-carel-table :datashoppingCarStore.shopCarListel-table-column propid label序号 aligncenter /el-table-column proptitle label名称 aligncenter /el-table-column propprice label价格 aligncenter /el-table-column propnumber label数量 aligncenter //el-tablediv classbtn v-ifshoppingCarStore.shopCarList.lengthh2商品总价是{{ shoppingCarStore.totalPrice }}/h2el-button typeprimary clickcalc结算商品/el-button/div/div
/templatescript setup
import { useShoppingCarStore } from ../store;
const shoppingCarStore useShoppingCarStore();
function calc() {//触发商品结算的方法 calc()shoppingCarStore.calc();
}
/script
