添加后的数据渲染在购物车页面
在登陆成功后请求购物车页面数据
Login.vue
setTimeout(() => { this.$axios({ method: "post", url: "/login", data: { username: this.username, password: this.password, }, }) .then((result) => { console.log(result); if ( this.username === result.data.data.username || this.password === result.data.data.password ) { Toast("登陆成功!"); this.$store.dispatch('updateCartList') this.login(result.data.data); this.$router.push("/Myfile"); } else { Toast("账号或密码不正确,请重新输入"); this.pshow = true; return (this.show = false); } }) .catch((err) => { console.log("数据请求错误,请联系工作人员"); return Toast("404,请联系工作人员"); }); }, 1000);
user.js
actions: { updateCartList( {commit} ){ Axios({ url:'/cart', data:{}, method:"get", headers:{ token:true } }).then(v=>{ window.sessionStorage.setItem('cart',JSON.stringify(v.data.data)) // 存储一下数据 commit('noselectAll') // 添加不全选方法 // 赋值 commit('initCartList', v.data.data) // 初始化渲染数据 }) } },
这样写不会每次点击页面都请求数据
使用$bus进行非父子组件传值使用解析
现在这里需要点击添加购物车时把数据添加到购物车里面。步骤如下:
main.js
Vue.prototype.$bus = new Vue();
detaiil.vue
接收使用$emit
派发使用$on
删除数据
添加成功后当然也需要进行删除,删除代码如下:
cart.js中的action
dodelgoods({ commit, state }) { Axios({ url: '/cart/delete', method:'POST', data: { shop_ids: state.selectedAll.join(',') }, header: { token: true } }).then(res => { console.log(res); }) commit('delgoods') },
Cart.vue
最后把删除事件变更为请求的方法即可完成
最终看一下实现效果: