购物车 上拉加载 下拉刷新

首页

<template>
  <div>
    <van-row>
      <van-col span="6">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="item in cate"
            :key="item.cid"
            :title="item.cname"
            @click="change(item.cid)"
          />
        </van-sidebar>
      </van-col>
      <van-col span="18">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" @load="onLoad">
            <van-cell v-for="(item, index) in goodlist" :key="index">
              <van-card
                tag="标签"
                :price="item.actualPrice"
                :desc="item.dtitle"
                :title="item.desc"
                :thumb="item.mainPic"
                :origin-price="item.originalPrice"
              >
                <template #num>
                  <van-icon
                    name="shopping-cart-o"
                    color="red"
                    size="26px"
                    @click="add(item)"
                  />
                </template>
              </van-card>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      goodlist: [],
      cate: [],
      activeKey: 0,

      loading: false,
      finished: false,
      refreshing: false,
      //跟下拉刷新有关的变量
      pageNum: 1,
      //当前的页码数
      cid: 6,
      //保存当前点击的分类id
    };
  },
  mounted() {
    this.$axios.get("http://api.kudesoft.cn/tdk/category").then((res) => {
      console.log(res);
      this.cate = res.data.data.data;
    });
    //刚进入页面请求 分类

    this.$axios
      .get(" http://api.kudesoft.cn/tdk/goods", {
        params: {
          cids: this.cid,
          pageSize: 10,
          pageId: this.pageNum,
        },
      })
      .then((res) => {
        console.log(res);
        this.goodlist = res.data.data.data.list;
      });
    //进入页面请求美食的列表数据
  },

  methods: {
    add(item) {
      this.$store.commit("add", item);
      //调用vuex里的add方法  commit就是调用vuex里的mutation的
    },
    change(id) {
      console.log(id);
      this.pageNum = 1;
      this.cid = id;
      this.goodlist = [];
      this.$axios
        .get("http://api.kudesoft.cn/tdk/goods", {
          params: {
            cids: this.cid,
            pageSize: 10,
            pageId: this.pageNum,
          },
        })
        .then((res) => {
          console.log(res);
          this.goodlist = res.data.data.data.list;
        });
    },
    onLoad() {
      console.log(111);
      this.pageNum++;
      this.$axios
        .get("http://api.kudesoft.cn/tdk/goods", {
          params: {
            cids: this.cid,
            pageSize: 10,
            pageId: this.pageNum,
          },
        })
        .then((res) => {
          console.log(res);
          this.goodlist.push(...res.data.data.data.list);
          //使用了es6中的数组的解构
          this.loading = false;
          //加载完毕让加载按钮消失
        });
    },
    //上拉加载让pagenum++加载下一页的数据push进商品列表中

    //下拉刷新重新加载数据
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.goodlist = [];

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.$axios
        .get("http://api.kudesoft.cn/tdk/goods", {
          params: {
            cids: this.cid,
            pageSize: 10,
            pageId: 1,
          },
        })
        .then((res) => {
          console.log(res);
          this.goodlist.push(...res.data.data.data.list);
          this.loading = false;
          this.refreshing = false;
        });
    },
  },
};
</script>

购物车页

<template>
  <div>
    <van-card
      v-for="(item, index) in $store.state.carlist"
      :key="index"
      :price="item.good.actualPrice"
      :desc="item.good.desc"
      :title="item.good.title"
      :thumb="item.good.mainPic"
    >
      <template #num>
        <van-stepper
          v-model="item.num"
          theme="round"
          button-size="22"
          @plus="caradd(item)"
          @minus="carmin(item)"
        />
      </template>
    </van-card>

    总价是：{{ $store.getters.allprice }}
  </div>
</template>
<script>
export default {
  methods: {
    caradd(item) {
      this.$store.commit("add", item.good);
    },
    //在购物车里的加
    carmin(item) {
      this.$store.commit("min", item.good);
    },
  },
};
</script>

``
## 标题vuex
```bash
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

// vuex是一个仓库，存放公共数据，任何组件都可以使用vuex里的公共数据
// vuex是vue的状态管理工具 状态指的就是数据

// 在本案例中购物车数据 被home组件和shopcar组件同时使用，这个时候购物车数据就适合被放进vuex中管理

export default new Vuex.Store({
  state: {
    carlist: [],
    //
  },
  mutations: {
    add(state, item) {
      var flag = false;
      state.carlist.forEach((i) => {
        if (i.good.id == item.id) {
          i.num++;
          flag = true;
          return false;
        }
      });
      if (flag == false) {
        state.carlist.push({
          good: item,
          num: 1,
        });
      }
    },
    //向购物车中添加商品，如果是已经存在的商品，就让num++，如果是不存在的商品，就向carlist中push一条新的数据
    //店家home组件中的购物车图标以及购物车组件的数量+按钮调用这个方法

    min(state, item) {
      state.carlist.forEach((i) => {
        if (i.good.id == item.id) {
          i.num--;
        }
      });
    },
    //商品-
    // 点击购物车组件里的数量-按钮触发

    //在mutation中第一个参数永远都是state，之后的参数才是接收的参数
    // this.$store.commit("xxx")
  },
  getters: {
    carsum(state) {
      var carnum = 0;
      state.carlist.forEach((item) => {
        carnum += item.num;
      });
      return carnum;
    },
    //计算购物车里所有的商品的数量

    allprice(state) {
      var price = 0;
      state.carlist.forEach((item) => {
        price += item.num * item.good.actualPrice;
      });
      return price;
    },
    //计算购物车里的商品的总价
  },
  //getters就相当于是之前记得计算属性 ，通过state得到新的值
  // this.$store.getters.xxx
});

// state 就是之前的data 数据
// mutations就是之前的methods 方法
// getters 就是之前的computed 计算属性

// 被公共管理的数据被放在state
// 在组件中 通过 this.$store.state.xxx 调用

// 如果要操作state，就使用 mutations操作state
// state只能在mutations中操作，不能在其他地方操作
// mutation调用：this.$store.commit("xxx",参数)

// getters 相当于是计算属性 想要通过state的值得到一个新的值的时候就用getters
// 调用 this.$store.getters.xxx

home。vue

<template>
  <div id="app">
    <router-view />

    <van-tabbar v-model="active" route>
      <van-tabbar-item name="1" icon="home-o" to="/home">主页</van-tabbar-item>
      <van-tabbar-item
        name="2"
        to="/shopcar"
        icon="shopping-cart-o"
        :badge="$store.getters.carsum"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item name="3" icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding-bottom: 100px;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>