商品添加购物车
- 商品数量
- 添加购物车
- 浏览器本地存储
- localStorage
- sessionStorage
- 添加成功页面
商品数量
输入为数字，最少为1
<div class="cartWrap"><div class="controls"><input autocomplete="off" class="itxt" v-model.number="skuNum" @input='validateNum'><a href="javascript:" class="plus" @click="skuNum++">+</a><a href="javascript:" class="mins" @click="skuNum>1?sku--:sku=1">-</a></div><div class="add"><a @click="addToCart">加入购物车</a></div>
</div>
data(){return {skuNum:1}
},- v-model.number
初始非数字字符问题：只能保证先输入数字后面的非数字字符能够去除，如果用户首先输入非数字字符（如字母、符号），v-model.number 不会自动过滤，会导致 skuNum 变为NaN
小数问题：v-model.number 会保留小数部分，而商品数量通常需要整数
//判断数量输入合法
methods:{validateNum(){//首先确保是数字if(isNaN(this.num)){this.num=1;}//限制最大值和最小值if (this.num < 1) {this.num = 1;} else if (this.num > 99) {this.num = 99;}//去除小数-取整this.num = Math.floor(this.num);}
}
添加购物车
是将产品添加到服务器里，在购物车页面展示的是服务器的数据
接口：用于将产品添加到购物车中，以及可以修改购物车产品数量
//api接口 需要传递商品数量以及商品id
export const reqAddOrUpdateCart = (skuId,skuNum)=>requests({url:`/cart/addToCart/${skuId}/${skuNum}`,method:'post'})
然后就是在仓库封装函数
//detail仓库
const actions = {……,async addToCart({commit},skuId.skuNum){let result = await reqAddOrUpdateCart(skuId,skuNum);console.log(result);}
}回到Detail组件绑定addToCart派发actions，vuex发送请求
methods:{async addToCart(){try{await this.$store.dispatch('addToCart',this.$route.params.skuId,this.skuNum);//成功则进行路由跳转到购物车this.$router.push(……)}catch(error){alert(error.message);}}
}
注意：加入购物车不需要仓库存储数据，只是将数据带给服务器，写入服务器，并不需要服务器返回数据。
async函数执行返回的是一个promise对象
浏览器本地存储
浏览器本地存储（webStorage）分为localStorage和sessionStorage
- sessionStorage浏览器一关则数据就清空了，表示会话结束
但loaclStorage还存在，用户调用clear()的API或者主动清空缓存才会没 getItem()，如果value找不到，则会返回null
(JSON.parse(null)结果仍为null)
localStorage
- 存储key-value----
localStorage.setItem(key,value)
//key和value都是字符串const p = {name:'Stella',age:21};
localStorage.setItem('msg','hello1');
//localStorage.setItem('person',p);//value为[object Object]--变成字符串形式
localStorage.setItem('person',JSON.stringify(p));//{"name":"Stella","age":21}
//没有则是null
- 获取value----
localStorage.getItem(key)
const value = localStorage.getItem('msg');//hello1
const p = JSON.parse(localStorage.getItem('person'));
- 移除key-value----
localStorage.removeItem(key) - 清空本地存储数据----
localStorage.clear()
sessionStorage
- 存储key-value----
sessionStorage.setItem(key,value)
const p = {name:'Stella',age:21};
sessionStorage.setItem('msg','hello1');
//sessionStorage.setItem('person',p);//value为[object Object]--变成字符串形式
sessionStorage.setItem('person',JSON.stringify(p));//{"name":"Stella","age":21}
//没有则是null
- 获取value----
sessionStorage.getItem(key)
const value = sessionStorage.getItem('msg');//hello1
const p = JSON.parse(sessionStorage.getItem('person'));
- 移除key-value----
sessionStorage.removeItem(key) - 清空本地存储数据----
sessionStorage.clear()
localStorage和sessionStorage的API起始一样，只是存储方式不同，本地存储时持久化的，需要手动；会话存储并非持久的，会话结束数据就消失
浏览器本地存储功能localStorage和sessionStorage，是HTML5新增的
添加成功页面
项目中点击添加购物车会展示添加成功页面，每添加一次就会展示一次该商品的信息添加成功。在这个过程中每个商品添加成功的过程只展现一次，然后是点击到购物车付款。
- 从商品页到添加购物车成功页，如何将商品信息传递过去？
- 通过路由传参？商品信息是个对象，对象里面有大量数据，那样路由地址很不清晰
- 通过将商品信息存储在会话存储中，当添加成功页面展示时调取会话中的数据。会话结束了数据就会消失。
注意key,value都是字符串，需要将对象转换成字符串JSON.stringify()，获取又将字符串转为对象JSON.parse()
点击添加购物车按钮事件中将商品信息存储在会话中sessionStorage.setItem('skuInfo',JSON.stringify(this.skuInfo))
在成功添加页面computed计算出属性，获取数据JSON.parse(sessionStorage.getItem('skuItem'))然后展示数据
