线上接口异步操作获取数据并加入购物车

1.先使用线上接口获取数据

  async created() {
  //  轮播
    var lunbo = await this.http.get("https://locally.uieee.com/slides");
    this.lunbo = lunbo.data;
    // 列表
     var liebiao = await this.http.get("https://api.it120.cc/small4/cms/news/list");
     console.log(liebiao);
     this .liebiao=liebiao.data.data
  },

2.接受数据并渲染页面

<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item of lunbo" :key="item._id">
        <img :src="item.image" alt width="100%"   lazy-load/>
      </van-swipe-item>
    </van-swipe>
     
    <!-- <van-tabs v-model="active" scrollspy sticky>
      <van-tab v-for="index in 8" :title="'选项 ' + index"></van-tab>
    </van-tabs> -->
    
    <van-grid :column-num="2">
      <van-grid-item icon="home-o" text="文字" dot v-for="item of liebiao" :key="item.id" > 
        <img :src="item.pic" alt="" width=100 @click="qxq(item.id)"  lazy-load />
         <p>{{item.commentNumber}}</p>
         <!-- 添加到购物车 -->
         <van-icon name="cart-o" color="#1989fa" @click="addcart(item)" />
      </van-grid-item>
    </van-grid>

3.购物车页面

<template>
  <div class="gouwu">
    <ul>
      <li v-for="(item,index) of liebiao" :key="item.id">
        <input type="checkbox" v-model="item.check" @click="zt(index)" />
        <img :src="item.pic" alt width="100" />
        <span>数量</span>
        <van-button type="primary" @click="jia(index)">+</van-button>

        <span>{{item.num}}</span>
        <van-button type="primary" @click="jian(index)">-</van-button>
        <van-button type="danger" @click="shanchu(index)">删除</van-button>
      </li>
    </ul>全选
    <input type="checkbox" v-model="all" />
    <p>总价{{s}}</p>
       <input type="button" value="删除选中商品" @click="del" />
  </div>
</template>
<script>
export default {
  props: [],
  data() {
    return {};
  },
  methods: {
    //删除选中商品
     del() {
      this.$store.commit("del");
    },
    jia(n) {
      this.$store.commit("jia", n);
    },
    jian(n) {
      this.$store.commit("jian", n);
    },
    shanchu(n) {
      this.$store.commit("shanchu", n);
    },
    //选中状态
    zt(index) {
      this.$store.commit("check", index);
    }
  },
  computed: {
    liebiao: function() {
      return this.$store.state.cart;
    },
    s() {
      return this.$store.getters.sum;
    },
    all: {
      get: function() {
        return this.$store.getters.all;
      },
      set: function(v) {
        this.$store.commit("qx", v);
      }
    }
  },
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMounte() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDistroy() {},
  distroyed() {}
};
</script>


<style scoped>
</style>

4.然后再store.js文件夹写入购物车 加 减 删除 全选

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  //把用户名username: ''存入vuex里面
  state: {
    username: '',
    cart: []//存储购物车数据
  },
  mutations: {
    login(state, wode) {
      state.username = wode
    },
    //退出把用户名清掉
    tuichu(state) {
      state.username = ''
    },
    //删除选中商品
    del(state) {
      var r = state.cart.filter(function (item) {
        return !item.check
      })
      state.cart = r;
    },
    //添加数据到购物车
    add(state, item) {//添加数据到购物车
      // alert(1)
      // state.cart.push(item)
      //判断商品是否存在
      var re = state.cart.findIndex(function (v) {//判断是否存在
        return v.id == item.id
      })
      if (re >= 0) {//存在的情况  re有返回值
        //入果存在时找到num++
        var arr = JSON.parse(JSON.stringify(state.cart))
        arr[re].num++;
        state.cart = arr;
      } else {//不存在的情况   re是underfined的时候不存在
        //不存在时给添加过来的属性 设置num属性赋值为1
        item.num = 1
        state.cart.push(item)
        item.check=false
      }
    },
    // 
    jia(state, n) {
      var arr = JSON.parse(JSON.stringify(state.cart))
      arr[n].num++;
      state.cart = arr
    },
    jian(state, n) {
      var arr = JSON.parse(JSON.stringify(state.cart))
      arr[n].num--;
      if (arr[n].num <= 0) {
        arr[n].num = 1
      }
      state.cart = arr
    },
    shanchu(state, n) {
      state.cart.splice(n, 1)
    },
    //选中
    check(state,index){
      var arr = JSON.parse(JSON.stringify(state.cart))
      arr[index].check=!arr[index].check
      state.cart=arr
    },
    //全选
    qx(state,v){
       state.cart.forEach(function(item){
         item.check=v
       })
    }
  },
  actions: {

  },
  //标签栏下面的数量
  getters:{
    goodsNum(state) {
      var s = 0
      state.cart.forEach(function (a) {
        s += a.num
      })
      return s
    },
     //总价
     sum(state) {
      var s = 0
      state.cart.forEach(function (item) {
        if (item.check) {
          s += item.commentNumber * item.num
        }

      });
      return s
    },
    all: function (state) {
      var re = state.cart.every(function (item) {
        return item.check
      })
      return re
    }
  }
})