Vue/vant——渲染详情页添加购物车数据渲染到购物车页面，并进行删除数据效果

目录

添加后的数据渲染在购物车页面

 使用$bus进行非父子组件传值使用解析

删除数据

---

 添加后的数据渲染在购物车页面

在登陆成功后请求购物车页面数据

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

 最后把删除事件变更为请求的方法即可完成

最终看一下实现效果：