vue3 简易版 购物车(数据持久化处理、axios数据请求、移动端适配) 包括【列表页、详情页、购物车页面】需要自己安装依赖

//引入使用容器 import axios from 'axios' import { defineStore } from "pinia" import { onBeforeMount, onMounted, reactive, ref, watch, computed } from "vue" //向外暴露要使用的容器 //采用组合式API的方式定义一个容器 export const useAxiosStore = defineStore('getAxios', () => { //采用axios技术请求服务端的数据 let axiosData = reactive([]) onMounted(() => { axios.get("http://vueshop.glbuys.com/api/home/index/goodsLevel?token=1ec949a15fb709370f").then((val) => { for (let i = 0; i < val.data.data[0].items.length; i++) { axiosData.push(val.data.data[0].items[i]) } }) }) //存储一个详情页的数据 let detailsData = reactive(JSON.parse(sessionStorage.getItem("detailsData")) || []) //将要跳转到详情页的数据存储到detailsData里面 function shortTime(data) { //声明一个开关 let flag = true; //判断临时存储里面有没有这条数据，有的话走缓存，没有的话进行存储 for (let i = 0; i < detailsData.length; i++) { if (detailsData[i].gid == data.gid) { console.log("临时存储里面有该数据") flag = false break; } } if (flag) { detailsData.push(data) sessionStorage.setItem("detailsData", JSON.stringify(detailsData)) } } //存储一个购物车的数据 let shopCartData = reactive(JSON.parse(localStorage.getItem("shopCartData")) || []) //存储购物车数据 function shopShuju(shuju, shuliang) { //声明一个开关 let flag = true; //判断本地存储里面有没有这条数据，有的话走缓存，没有的话进行存储 for (let i = 0; i < shopCartData.length; i++) { if (shopCartData[i].gid == shuju.gid) { flag = false let wheater = confirm("该商品已在购物车序列中,是否进行数量的加减") if (wheater) { shopCartData[i].num = shuliang let newObj = { cid: shopCartData[i].cid, gid: shopCartData[i].gid, image: shopCartData[i].image, num: shuliang, price: shopCartData[i].price, title: shopCartData[i].title, isChecked: shopCartData[i].isChecked } shopCartData.splice(i, 1) shopCartData.push(newObj) alert("该商品的数量已更新") } break; } } if (flag) { shopCartData.push(shuju) } } watch(shopCartData, (newValue) => { localStorage.setItem("shopCartData", JSON.stringify(newValue)); }); //购车里的数量加 function cartAdd(id) { for (let i = 0; i < shopCartData.length; i++) { if (shopCartData[i].gid == id) { shopCartData[i].num++ shopCartData[i].isChecked=true } } } //购车里的数量减 function cartReduce(id) { for (let i = 0; i < shopCartData.length; i++) { if (shopCartData[i].gid == id) { shopCartData[i].num-- shopCartData[i].isChecked=true if (shopCartData[i].num < 1) { shopCartData[i].num = 1 } } } } //购物车的商品删除 function cartDelete(id) { for (let i = 0; i < shopCartData.length; i++) { if (shopCartData[i].gid == id) { shopCartData.splice(i, 1) } } } //修改单选框的状态 function select(id) { for (let i = 0; i < shopCartData.length; i++) { if (shopCartData[i].gid == id) { shopCartData[i].isChecked = !shopCartData[i].isChecked } } } //计算单选框的状态，全为true，全选选中 let allselect = computed(() => { return shopCartData.every(item => item.isChecked) && shopCartData.length > 0 }) //全选选中，单选全部选中 function quanxuan(checked) { for (let i = 0; i < shopCartData.length; i++) { shopCartData[i].isChecked = checked } } //总价 let allmoney=computed(()=>{ let zja=0; shopCartData.filter(item=>{ if (item.isChecked) { zja+=Number(item.num*Number(item.price)) } }) return zja.toFixed(2) }) return { axiosData, detailsData, shortTime, shopCartData, shopShuju, cartAdd, cartReduce, cartDelete, select, allselect, quanxuan, allmoney } })