渲染页到详情页到加入购物车

1、渲染

拿到数据放在自己的data渲染

data（）{

headerList: []

}

:class="tabid == index ? 'active' : ''" //tabid点击时的下标 index是数组下标 active是选中时状态

分类功能：

@click="handfenl(item.Value, index)" //实参是对比接口地址之后传不同的参数

handfenl(idx, index) {

this.tabid = index;  //下标

this.category = idx;//参数内容

let data1 = `module=Goods.Buy&action=GetGoods&page=1&SortKey=${this.SortKeyid}&category=${this.category}&theme=${this.theme}&price=${this.price}`;   //这个是post的参数 要是后端接口没有就不带

request.post("/art/ajax/index", data1).then((res) => {  //config中有前半截数据网址，/art/ajax/index是连接上形成一个完整的链接，data1是带的参数

this.mainList = res.data.Data;   //拿出数据给自己的数据包

});

mainList是所有数据包都可以赋值 然后 数据包改变

2、渲染好了点击跳转到详情页面

<router-link to="/detail/fen">   //跳转路劲

@click="handlJump(item)  //点击图片传给该路径的数据包（详情页的渲染）

因为要传数据到另一个页面所以

第一步

 methods: {

 ...mapMutations({  解构赋值的方法

      handlJump: "detail/Jump",//这个是状态机store的方法 到状态机方法的路径

    }),

  },

第二步状态机（detail.js）

import Vue from 'vue'  //引入

export default {

    namespaced: true,

    state() {

        return {

            data: [],

            test: {},

            detaList: []

        }

    },

    getters: {

       

    },

    mutations: {

        Jump(state, obj) {   方法名，接收的数据包

            state.data = obj;

            localStorage.setItem('shuaix', JSON.stringify(state.data));  //'shuaix'是传给详情页的数据包 详情页靠这个渲染

        },

       

    }

}

第三步 详情页

<div :plain="true" @click="open2"> 

<em @click=" cart(shuaix); handtianj(); ">加入购物车</em> 

</div>

//cart是一个方法，在store里面的cart.js中判断购物车是否有当前这个商品

//handtianj() 是一个函数方法把商品添加到购物车

cart：

import Vue from "vue";

export default {

  namespaced: true,

  state() {

    return {

      cartList: [],

      ischengg: true,

    };

  },

  mutations: {

    shopCart(state, obj) {

      //将详情页数据添加至购物车

      console.log(obj);

      var flag = 0;  //设定变量为0

      state.cartList.forEach((item) => {  //循环每一项

        if (obj.ArtworkId == item.ArtworkId) { 如果传入的id==目前数组中的id 

          flag = 1;

        }

      });

      if (flag) {  //如果传入的id==目前数组中的id 相同 加入购物车就是失败

        state.ischengg = false;

        console.log("失败");

      } else { //如果传入的id==目前数组中的id 不相同 加入购物车就是成功

        state.cartList.push(obj);   //然后把传入的obj推入到这个数组

        state.ischengg = true;    //单选框编程√

        console.log("成功");

      }

    },

  },

};

详情页handtianj()

handtianj() {

                if (!sessionStorage.UserName) { //判断是否登录

                    this.$router.push("/login"); //没有登录就把他路由转进登录页

                }

                if (this.bool == false) {   //跟状态中拿数据出来

                    this.msg = "添加失败，购物车已有此商品";

                    this.typ = "error";

                }

            },

购物车页面渲染

父组件：

import BuyCart from "./BuyCary.vue";  //引入子组件

export default {

  components: {

    BuyCart,   //挂载在本页面上

  },

  computed: {

    cart() {

      return this.$store.state.Cart.cartList;  //连接路由里面的cart.js中的cartList方法  目的数据包传给子组件用

    },

    allinfo() {

      return this.$store.getters["Cart/allinfo"];

    },

    cartList() {

      return this.$store.state.Cart.cartList;

    },

    userlist() {

      return this.$store.state.username.user;

    },

  },

  methods: {

    Allcheck() {   //全选

      this.$store.commit("Cart/Allcheck", this.allinfo.allcheck);

    },

    DelGoods() {  

      this.$store.commit("Cart/DelGoods");

    },

    insetcartlist() {

      this.$store.commit("Cart/insetCartList", this.userlist);

    },

  },

  created() {

    this.insetcartlist();

  },

};

子组件（可复用在结算页）

export default {

  data() {

    return {

      Ishome: this.$route.params.categroy,  //不知道是啥

    };

  },

  props: {

    cartList: {  //接收父组件的数据包

      type: Array,

      required: true,

    },

    check: {

      type: Boolean,

      default: true,

    },

  },

  methods: {

    changeCheck(idx) {

      this.$store.commit("Cart/changeCheck", idx);   //选中单选框

    },

  },

  created() {

    console.log(this.cartList);

    console.log(this.cartList[0].CountLike);

    console.log(this.$route.params.categroy);

  },

};