vant框架的使用

• 适用于移动端！
• 官网：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart
• 安装：npm i vant -S
• 使用：
  • 方式1：导入所有组件

    import Vue from 'vue';import Vant from 'vant';import 'vant/lib/index.css';Vue.use(Vant);
  

  • 方式2：自动按需引入组件 (推荐)

    babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式+ 安装插件 `npm i babel-plugin-import -D`// 在.babelrc 中添加配置 => 根目录下创建这个文件夹！// 方式1：  注意：webpack 1 无需设置 libraryDirectory{"plugins": [["import", {"libraryName": "vant","libraryDirectory": "es","style": true}]]}//方式2： 对于使用 babel7 的用户，可以在 babel.config.js 中配置 =>** 推荐使用这种！**module.exports = {plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]};// 接着你可以在代码中直接引入 Vant 组件// 插件会自动将代码转化为方式二中的按需引入形式import { Button } from 'vant';//如果你在使用 TypeScript，可以使用 ts-import-plugin 实现按需引入
  

使用一个Tabbar 标签栏

• 官网：https://vant-contrib.gitee.io/vant/#/zh-CN/tabbar
• 作用：就是在引入一个tabbar 标签栏 由于这个组件是在多个页面使用到的，因此在App.vue组件中引入和使用

App.vue

<template><div id="app"><main-tabbar></main-tabbar><router-view /></div>
</template>
<script>
import MainTabbar from "./components/MainTabbar";
export default {name: "App",components: {MainTabbar,},
};
</script>

封装为一个MainTabbar.vue组件

• import { Tabbar, TabbarItem } from "vant"; 导入组件！
• v-model="active" 高亮显示，默认为0
• v-for="item in tabList" 遍历的数据
• route => 以路由的形式跳转
• :to="item.path" => 点击后，跳转到对应的path

<!--  -->
<template><van-tabbar v-model="active" route><van-tabbar-itemv-for="item in tabList":key="item.text":icon="item.icon":to="item.path">{{item.text}}</van-tabbar-item></van-tabbar>
</template><script>
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";
Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {name: "MainTabber",data() {return {active: 0,tabList: [{path: "/home",text: "首页",icon: "wap-home-o",},{path: "/category",text: "分类",icon: "apps-o",},{path: "/cart",text: "购物车",icon: "shopping-cart-o",},{path: "/profile",text: "我的",icon: "user-o",},],};},methods: {},components: {},
};
</script>
<style  lang="scss" scoped>
</style>

使用一个Swipe 轮播图

• 官网：https://vant-contrib.gitee.io/vant/#/zh-CN/swipe
• 引入：需要在哪个组件使用，就引入即可！

  import Vue from 'vue';
  import { Swipe, SwipeItem, Lazyload, Image } from "vant";Vue.use(Swipe);
  Vue.use(SwipeItem);
  Vue.use(Lazyload);//懒加载
  Vue.use(Image); //显示img的！
  

Home.vue组件使用轮播图

  <div class="home"><van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"><van-swipe-item v-for="item in rotationList" :key="item._id"><img v-lazy="item.imgurl" /></van-swipe-item></van-swipe></div>

import Vue from "vue";
import { Swipe, SwipeItem, Lazyload, Image } from "vant";Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Lazyload);
Vue.use(Image);
export default {name: "Home",data() {return {//轮播图的数据rotationList: [],};},async created() {const { data: rotationList } = await this.$request.get("/goods", {params: {size: 5,},});console.log("我是data", rotationList);this.rotationList = rotationList;},components: {},
};

.my-swipe .van-swipe-item {color: #fff;font-size: 20px;height: 150px;text-align: center;/* background-color: #39a9ed; */
}
.my-swipe .van-swipe-item img {width: 100px;height: 100%;
}

使用一个 Gird 宫格 实现商品列表展示

• 官网：https://vant-contrib.gitee.io/vant/#/zh-CN/grid

• 宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航

• 引入：所需的.vue组件内引入

  import Vue from 'vue';
  import { Grid, GridItem } from 'vant';Vue.use(Grid);
  Vue.use(GridItem);
  

• 需求：显示商品列表，并且点击的时候，跳转到对应的详情页之中！

Home.vue组件

• :column-num="2" => 显示的列数
• goodsList => 商品的数据
• @click="gotoDetails(value._id)" => 点击事件，点击格子的时候触发

    <!-- 商品列表 --><van-grid class="my-goods" :column-num="2"><van-grid-item v-for="value in goodsList" :key="value._id" @click="gotoDetails(value._id)"><van-image class="goodsImg" :src="value.imgurl" /><h4>{{ value.name}}</h4></van-grid-item></van-grid>

import Vue from "vue";
import {  Lazyload, Image, Grid, GridItem } from "vant";Vue.use(Lazyload);
Vue.use(Image);
Vue.use(Grid);
Vue.use(GridItem);export default {name: "Home",data() {return {//商品列表的数据goodsList: [],};},async created() {//商品列表的请求const { data: goodsList } = await this.$request.get("/goods");// console.log("我是商品列表", goodsList);this.goodsList = goodsList;},methods: {//点击 具体的商品 去往详情页！gotoDetails(id) {console.log(id);this.$router.push({name: "GotoDetails",params: {id,},});},},
};

goodsDetails.vue详情页组件

• 接受到home.vue组件传递过来的id，然后发起请求，展示详情页！

<template><div>我是商品详情页</div>
</template><script>
export default {name: "GotoDetails",data() {return {};},created() {this.getDetail();},methods: {async getDetail() {const id = this.$route.params.id;//拿着id 发起请求 拿到详情页的数据const {data: {data: { result: goods },},} = await this.$request.get("/goods/" + id);console.log("我是详情页", goods);this.goods = goods;},},components: {},
};
</script>
<style  lang="scss" scoped>
</style>

商品列表之中 点击图片显示商品的预览 大图片

• 官网：https://vant-contrib.gitee.io/vant/#/zh-CN/image-preview
  Details.vue组件

  <div class="details"><div class="smallImg-box"><van-image class="smallImg" @click="showBig" :src="goodsDetails.imgurl"></van-image></div></div>

• this.goodsDetails 为商品的数据！

    // 显示大图片showBig() {//图片传入到数组之中ImagePreview([this.goodsDetails.imgurl]);},

详情页Details.vue之中

• 先根据id，获取对应的商品，显示在页面之中 => getDetail()

• 获取推荐图书的数据，显示页面之中 => getRecomment

• 点推荐图书，更换最新的图书

  • 需要在created钩子函数之中，获取id，并且调用对应的方法，至于为什么在这边获取id，这是只要一创建组件，那么就获取id！

  created() {const id = this.$route.params.id;this.getDetail(id);this.getRecomment();
  },
  

• 点击跳转到详情页的时候，需要把下面的tabbar隐藏，显示加入购物车！

  • 在Vuex之中定义一个状态 => isShowMemu 这个变量！ => 还未完成！

• html

  <div class="details"><div class="smallImg-box"><van-image class="smallImg" @click="showBig" :src="goodsDetails.imgurl"></van-image><div class="recommend-box"><h1>{{ goodsDetails.name}}</h1><h4>{{ goodsDetails.auth}}</h4><h5>连载中</h5></div></div><div class="validity-con"><h3>内容简介</h3><p>{{ goodsDetails.intro }}</p></div><div class="recomment-box"><h3>图书推荐</h3><van-grid class="my-goods" :column-num="3"><van-grid-itemv-for="value in goodsRecomemnt":key="value._id"@click="gotoDetails(value._id)"><van-image class="goodsImg" :src="value.imgurl" /><h4>{{ value.name}}</h4></van-grid-item></van-grid></div></div>

• js

export default {name: "GotoDetails",data() {return {goodsDetails: [],goodsRecomemnt: [],};},created() {const id = this.$route.params.id;this.getDetail(id);this.getRecomment();},methods: {// 获取详情页的数据async getDetail(id) {//拿着id 发起请求 拿到详情页的数据const {data: {data: { result: goods },},} = await this.$request.get("/goods/" + id);// console.log("我是详情页111", goods[0]);this.goodsDetails = goods[0];},// 显示大图片showBig() {//图片传入到数组之中ImagePreview([this.goodsDetails.imgurl]);},// 获取推荐页的数据async getRecomment() {const { data } = await this.$request.get("/goods");// console.log("我是推荐的", data);this.goodsRecomemnt = data;},//跳转到 详情页gotoDetails(id) {console.log("我是跳转的id", id);this.$router.push({name: "Details",params: {id,}});},},beforeRouteUpdate(to, from, next) {// console.log(to.params.id, from.params.id);if (to.params.id !== from.params.id) {console.log("我是去的id", to.params.id);this.getDetail(to.params.id);this.getRecomment();}next();},s
};

详情页Details.vue之购物车

• 官网：https://vant-contrib.gitee.io/vant/#/zh-CN/card
• 需求：
  • 先获取到购物车的数据 渲染页面！
  • 点击左侧的img的时候，跳转到详情页 对应的详情页！

先获取到购物车的数据 渲染页面！

store/index.js

  state: {//是否显示那个tabbarisShowMemu: true,//购物车的数据cartList: [{"_id": "5f4f5e38aaf12252fb74c93b","name": "鼎定乾坤","date": "2020 08-19 11:28","intro": "玄黄缔造者……极致超脱之路,哪怕天难葬其身，地难灭其魂。亦难以跳出那个圈。星空崩塌，万族凋零。如何以一己之力逆转乾坤，颠倒阴阳。且看那一袭青衫，一柄长剑，一方圆鼎：脚踏修真，拳碎仙域，剑斩神界，鼎定至尊，极致超脱。书群，1141419286扣扣","auth": "浅山深水","imgurl": "imgbook1/f3aa24ea917f79a95b81ea86c91b4043.jpeg","price": 123.2,"qty": 1}, {"_id": "5f4f5e38aaf12252fb74c93b","name": "鼎定乾坤","date": "2020 08-19 11:28","intro": "玄黄缔造者……极致超脱之路,哪怕天难葬其身，地难灭其魂。亦难以跳出那个圈。星空崩塌，万族凋零。如何以一己之力逆转乾坤，颠倒阴阳。且看那一袭青衫，一柄长剑，一方圆鼎：脚踏修真，拳碎仙域，剑斩神界，鼎定至尊，极致超脱。书群，1141419286扣扣","auth": "浅山深水","imgurl": "imgbook1/f3aa24ea917f79a95b81ea86c91b4043.jpeg","price": 123.2,"qty": 1}]},

渲染页面 Cart.vue

    <!-- 购物车item --><van-cardv-for="item in cartList":key="item._id":num="item.qty":desc="item.auth":title="item.name":thumb="item.imgurl"><template #tag><van-checkbox v-model="checked"></van-checkbox></template><template #price><span class="price">￥{{ item.price }}</span><van-stepper v-model="value" theme="round" button-size="22" disable-input /></template><template #footer><van-button icon="cross" size="mini" plain type="danger"></van-button></template></van-card>

  created() {this.getCartList();},methods: {//获取购物车的数据getCartList() {// console.log("我是购物车item", this.$store.state.cartList);this.cartList = this.$store.state.cartList;},}

点击左侧的img的时候，跳转到详情页 对应的详情页！

• click-thumb 点击自定义图片时触发

CArt.vue组件

• 给van-card 绑定事件

    <van-card...@click-thumb="gotoDetails(item._id)">

• 在methods之中点击 跳转！

    //点击左侧的小图标 跳转到详情页gotoDetails(id) {this.$router.push({name: "Details",params: {id,},});},

点击左侧的复选框的时候，勾选上复选框，然后影响全选按钮

• 所有的复选框勾选上了后，才触发全选按钮！

store/index.js文件中的state数据

    cartList: [{"_id": "5f4f5e38aaf12252fb74c93b","name": "鼎定乾坤","date": "2020 08-19 11:28","intro": "玄黄缔造者……极致超脱之路,哪怕天难葬其身，地难灭其魂。亦难以跳出那个圈。星空崩塌，万族凋零。如何以一己之力逆转乾坤，颠倒阴阳。且看那一袭青衫，一柄长剑，一方圆鼎：脚踏修真，拳碎仙域，剑斩神界，鼎定至尊，极致超脱。书群，1141419286扣扣","auth": "浅山深水","imgurl": "imgbook1/f3aa24ea917f79a95b81ea86c91b4043.jpeg","price": 123.2,"qty": 1,"check": false}, {"_id": "5f4f5e38aaf12252fb74c93e","name": "雷神传之雷神再世","date": "2020 08-18 22:47","intro": "以武侠小说的名义 ，说一段刻骨铭心的爱情故事 ！","auth": "猛士七","imgurl": "imgbook1/ba83c1528c275b6c154ffd482d4541c3.jpeg","price": 12,"qty": 1,"check": false}]

Cart.vue中的复选框

   <!-- 购物车item --><van-cardclass="card-item"v-for="item in cartList":key="item._id":num="item.qty":desc="item.auth":title="item.name":thumb="item.imgurl"@click-thumb.stop.native="gotoDetails(item._id)"><template #tag class="checkBox"><van-checkbox v-model="item.check"></van-checkbox></template><template #price><span class="price">￥{{ item.price }}</span><van-stepper v-model="value" theme="round" button-size="22" disable-input /></template><template #footer><van-button icon="cross" size="mini" plain type="danger"></van-button></template></van-card><!-- 提交订单 --><van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit"><van-checkbox v-model="checkAll">全选</van-checkbox><template #tip>你的收货地址不支持同城送,<span>修改地址</span></template></van-submit-bar>

  computed: {//全选按钮和 复选按钮checkAll: {get() {//遍历cartList每一项 所有都为选上的时候 为真！也就是把全选勾上 return this.cartList.every((item) => item.check);},set(val) {//这是全选  设置小复选框的状态！ 遍历所有小复选框 把当前的全选的val 给小复选框设置 ！this.cartList = this.cartList.map((item) => {item.check = val;return item;});},},},

计算总价

store/index.js

  state: {//是否显示那个tabbarisShowMemu: true,totalPrice: "",//购物车的数据cartList: [{"_id": "5f4f5e38aaf12252fb74c93b","name": "鼎定乾坤","date": "2020 08-19 11:28","intro": "玄黄缔造者……极致超脱之路,哪怕天难葬其身，地难灭其魂。亦难以跳出那个圈。星空崩塌，万族凋零。如何以一己之力逆转乾坤，颠倒阴阳。且看那一袭青衫，一柄长剑，一方圆鼎：脚踏修真，拳碎仙域，剑斩神界，鼎定至尊，极致超脱。书群，1141419286扣扣","auth": "浅山深水","imgurl": "imgbook1/f3aa24ea917f79a95b81ea86c91b4043.jpeg","price": 123.2,"qty": 1,"check": false}, {"_id": "5f4f5e38aaf12252fb74c93e","name": "雷神传之雷神再世","date": "2020 08-18 22:47","intro": "以武侠小说的名义 ，说一段刻骨铭心的爱情故事 ！","auth": "猛士七","imgurl": "imgbook1/ba83c1528c275b6c154ffd482d4541c3.jpeg","price": 12,"qty": 1,"check": false}]},getters: {//计算总价totalPrice(state) {return state.cartList.reduce((pre, cue) => pre + cue.price * cue.qty, 0) * 100}},

Cart.vue组件

    <!-- 提交订单 --><van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">

    //计算总价totalPrice() {return this.$store.getters.totalPrice;},

点击修改 数量的时候，修改总价！

• change 当绑定值变化时触发的事件

Cart.vue中的mutations属性中修改

    //修改购物车数量changeQty(state, payload) {// console.log("mu修改", payload);state.cartList = state.cartList.map(item => {if (item._id === payload.id) {item.qty = payload.qty}return item})},

Cart.vue组件

• @change="changeQty(item._id,$event)" 修改里面的数据的时候 触发 传递id 和 保留之前的qty数值！

      <template #price><span class="price">￥{{ item.price }}</span><van-stepper@change="changeQty(item._id,$event)"v-model="item.qty"theme="round"button-size="22"disable-input/></template>

methods:{//修改数量changeQty(id, qty) {// 获取当前的值！// console.log("我是修改的111", id, qty);this.$store.commit("changeQty", { id, qty });},
}

点击加入购物车

• 假如购物车之中存在这个商品，那么就触发修改qty数量的方法
• 假如购物车里面不存在这个商品，那么就触发添加购物车商品！

store/index.js

 state: {//购物车的数据cartList: [{"_id": "5f4f5e38aaf12252fb74c93b","name": "鼎定乾坤","date": "2020 08-19 11:28","intro": "玄黄缔造者……极致超脱之路,哪怕天难葬其身，地难灭其魂。亦难以跳出那个圈。星空崩塌，万族凋零。如何以一己之力逆转乾坤，颠倒阴阳。且看那一袭青衫，一柄长剑，一方圆鼎：脚踏修真，拳碎仙域，剑斩神界，鼎定至尊，极致超脱。书群，1141419286扣扣","auth": "浅山深水","imgurl": "imgbook1/f3aa24ea917f79a95b81ea86c91b4043.jpeg","price": 123.2,"qty": 1,"check": false}, {"_id": "5f4f5e38aaf12252fb74c93e","name": "雷神传之雷神再世","date": "2020 08-18 22:47","intro": "以武侠小说的名义 ，说一段刻骨铭心的爱情故事 ！","auth": "猛士七","imgurl": "imgbook1/ba83c1528c275b6c154ffd482d4541c3.jpeg","price": 12,"qty": 1,"check": false}]},getters: {//计算总价totalPrice(state) {return state.cartList.reduce((pre, cue) => pre + cue.price * cue.qty, 0) * 100}},mutations: {//修改购物车数量changeQty(state, payload) {// console.log("mu修改", payload);state.cartList = state.cartList.map(item => {if (item._id === payload.id) {item.qty = payload.qty}return item})},// 添加购物车addToCart(state, payload) {// console.log("我是添加购物车", payload);state.cartList.unshift(payload)}},

Details.vue

  <van-goods-action-button @click="addToCart" type="warning" text="加入购物车" />

• 判断购物车里面是否有这个商品 有的话 数量+1 没有的话 就qty为1

  methods:{//加入购物车addToCart() {const { _id: id } = this.goodsDetails;//根据id 去查询购物车 里面是否含有该id的商品！const current = this.$store.state.cartList.filter((item) => item._id === id)[0];// console.log("我是当前的", current); // 如果有的话 那么qty++ 没有的话添加商品！if (current) {this.$store.commit("changeQty", { id, qty: current.qty + 1 });} else {const goods = {...this.goodsDetails,qty: 1,};// 调用mutation 中的addToCart方法this.$store.commit("addToCart", goods);}},}

点击购物车之中的删除按钮

store/index.js

  state: {//是否显示那个tabbarisShowMemu: true,totalPrice: "",//购物车的数据cartList: [{"_id": "5f4f5e38aaf12252fb74c93b","name": "鼎定乾坤","date": "2020 08-19 11:28","intro": "玄黄缔造者……极致超脱之路,哪怕天难葬其身，地难灭其魂。亦难以跳出那个圈。星空崩塌，万族凋零。如何以一己之力逆转乾坤，颠倒阴阳。且看那一袭青衫，一柄长剑，一方圆鼎：脚踏修真，拳碎仙域，剑斩神界，鼎定至尊，极致超脱。书群，1141419286扣扣","auth": "浅山深水","imgurl": "imgbook1/f3aa24ea917f79a95b81ea86c91b4043.jpeg","price": 123.2,"qty": 1,"check": false}, {"_id": "5f4f5e38aaf12252fb74c93e","name": "雷神传之雷神再世","date": "2020 08-18 22:47","intro": "以武侠小说的名义 ，说一段刻骨铭心的爱情故事 ！","auth": "猛士七","imgurl": "imgbook1/ba83c1528c275b6c154ffd482d4541c3.jpeg","price": 12,"qty": 1,"check": false}]},//删除购物车 item payload 为前面传递过来的iddelGoods(state, payload) {state.cartList = state.cartList.filter(item => item._id !== payload)}},

Cart.vue组件

  <van-button icon="cross" size="mini" plain type="danger" @click="delGoods(item._id)"></van-button>

  methods: {//获取购物车的数据getCartList() {this.cartList = this.$store.state.cartList;},//删除商品delGoods(id) {this.$store.commit("delGoods", id);this.getCartList();},}

点击购物车之中的清空购物车按钮

store/index.js

    //清空购物车clearCart(state) {console.log("我是清空触发");state.cartList = []}

Cart.vue组件

    <!-- 清空购物车 --><div style="padding:10px"><p v-show="!isShowClearCart">购物车空空如也！</p><van-button plain type="danger" v-show="isShowClearCart" size="small" @click="clearCart">清空购物车</van-button></div>

• 注意点：需要在data之中定义 isShowClearCart变量 默认为true 显示清空购物车按钮！

    //清空购物车clearCart() {this.$store.commit("clearCart");this.getCartList();if (this.cartList.length === 0) {this.isShowClearCart = false;} else {this.isShowClearCart = true;}},

在多个页面显示购物车的 数量

MainTabbar.vue

显示购物车的数量 :badge="item.text === '购物车' ? cartLength :''"

    <van-tabbar-itemv-for="item in tabList":key="item.text":icon="item.icon":to="item.path":badge="item.text === '购物车' ? cartLength :''">{{item.text}}</van-tabbar-item>

  computed: {cartLength() {return this.$store.state.cartList.length;},},

在详情页之中 添加navTab

• 点击返回首页！

需要的组件.vue

    <!-- 导航栏目 --><van-nav-bar left-text="返回" @click-left="backHome" left-arrow></van-nav-bar>

  methods: {//点击返回首页backHome() {this.$router.push({name: "Home",});},}

actions异步

• 点击+ 的时候 查询库存 假如超过库存 那么就不再添加 否则可以添加！

store/index.js

 cartList: [{}],//数据mutations: {//修改购物车数量changeQty(state, payload) {console.log("mu修改数量", payload);state.cartList = state.cartList.map(item => {if (item._id === payload.id) {item.qty = payload.qty}return item})},},actions: {//请求 查询库存多少！ /:id/kucunasync changeQtyAsunc(context, payload) {const {data} = await $request.get(`/goods/${payload.id}/kucun`)if (payload.qty > data.kucun) {Notify({type: 'danger',message: '超过库存，仅能下单这些！'});payload.qty = data.kucun}// console.log("我是修改后的", payload);context.commit("changeQty", payload)}},

Cart.vue

      <template #price><span class="price">￥{{ item.price }}</span><van-stepper@change="changeQty(item._id,$event)"v-model="item.qty"theme="round"button-size="22"disable-input/></template>

mmethods:{//修改数量changeQty(id, qty) {// 获取当前的值！// console.log("我是修改的111", id, qty);// this.$store.commit("changeQty", { id, qty });this.$store.dispatch("changeQtyAsunc", { id, qty });},
}

Details.vue 查询库存

• 点击购物车之中的 添加商品 查询库存

    <!-- 购物车 --><van-goods-action><van-goods-action-icon icon="chat-o" text="客服" color="#07c160" /><van-goods-action-icon :badge="cartLength" @click="gotoCart" icon="cart-o" text="购物车" /><van-goods-action-icon icon="star" text="已收藏" color="#ff5000" /><van-goods-action-button @click="addToCart" type="warning" text="加入购物车" /><van-goods-action-button @click="buyNow" type="danger" text="立即购买" /></van-goods-action>

methods:{//加入购物车addToCart() {//判断购物车里面是否有这个商品 有的话 数量+1 没有的话 就qty为1const { _id: id } = this.goodsDetails;//根据id 去查询购物车 里面是否含有该id的商品！const current = this.$store.state.cartList.filter((item) => item._id === id)[0];// console.log("我是当前的", current); // 如果有的话 那么qty++ 没有的话添加商品！if (current) {this.$store.dispatch("changeQtyAsunc", { id, qty: current.qty + 1 });} else {const goods = {...this.goodsDetails,qty: 1,};// 调用mutation 中的addToCart方法this.$store.commit("addToCart", goods);}},//立即购买buyNow() {this.addToCart();//跳转到购物车this.$router.push({name: "Cart",});},
}

在Home.vue组件中 一进入就获取购物车的数据

• 在home.vue组件中先发起请求 created之中 this.$store.dispatch("getCart")
• 在store/index.js之中，actions之中 发起请求

      state:{goodslist:[]}mutations:{initCart(state,data){state.goodslist = data;},},actions:{async getCart(){const {data} = await request.get(`/cart`);context.commit('initCart',data.data)}}
  

v浅谈vue之vant框架相关推荐

1. 浅谈Vue.js的优势

   写在前面 今天小梦跟小伙伴们简简单单聊一下Vue.js的优势.小梦也是刚刚接触Vue.js,在学习一门新的技术之前,我们当然要了解其优势,知道优势在哪更加有利于我们去学习并转换为自己的储备. 浅谈Vu ...

2. php tp框架,浅谈PHP之ThinkPHP框架使用详解

   Thinkphp框架其精髓就在于实现了MVC思想,其中M为模板.V为视图.C为控制器,模板一般是公共使用类,在涉及数据库时,一般会跟数据表同名,视图会和控制器类里的方法进行名字的一一对应. 下载及配置 ...

3. 父子组建传值_浅谈Vue父子组件和非父子组件传值问题

   本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...

4. vue 给checkbox 赋值_浅谈vue中关于checkbox数据绑定v-model指令的个人理解

   vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: {{msg}} js里data初始化数据 new Vue({ el: "#myA ...

5. java get请求 数组,浅谈vue中get请求解决传输数据是数组格式的问题

   qs的stringify接收2个参数,第一个参数是需要序列化的对象,第二个参数是转化格式,一般默认格式是给出明确的索引,如:arr[0]=1&arr[1]=2 //indices是index的 ...

6. anchor锚点 antvue_浅谈vue 锚点指令v-anchor的使用

   如下所示: export default { inserted: function(el, binding) { el.onclick = function() { let total; if (bi ...

7. 浅谈Vue中的虚拟DOM

   Virtual DOM 是JavaScript按照DOM的结构来创建的虚拟树型结构对象,是对DOM的抽象,比DOM更加轻量型 为啥要使用Virtual DOM 当然是前端优化方面,避免频繁操作DOM, ...

8. 浅谈vue的前世今生

   在近几年的web及项目开发中,从社会使用的普遍度以及受欢迎度,vue技术的使用越来越普遍,其各种资料.介绍以及使用攻略内容资料 非常多,那么vue到底什么?它的发展历程又是什么样,其中又有那些改变和优 ...

9. 浅谈五大Python Web框架

   http://www.csdn.net/article/2011-02-17/292058 导读:作者飞龙写了一篇<浅谈Python Web框架>,文中他介绍了几个Python Web框架 ...

最新文章

1. 第十五次发博不知道用什么标题好
2. 算法练习day1——190318（二分查找）
3. 堆栈和堆得区别与垃圾回收
4. win2008一键配置php mysql_Windows 2008一键安装包配置环境：Windows+IIS+Php+Mysql
5. java webmethod 参数_java详解Spring接收web请求参数的方式
6. leetcode 839. 相似字符串组（并查集）
7. mysql union null_mysql – 删除SQL中的SQL JOIN和UNION操作符中的NULL值
8. 如果谁和飞鸽传书讨论这两个问题
9. poj1548Robots dfs实践
10. UITextField加间隔符号格式化
11. 无敌打印（适用各种浏览器自带打印功能）
12. 七 、Quartz 2D Bitmap上下文
13. 传统ADC主要指标：SFDR、SNR、SNDR、ENOB
14. 批量添加搜狗域名绑站工具
15. 除了攀附名人、杜撰荣恩录，家谱造假中，还有这件事令人羞耻
16. 大型医院叫号管理系统源码
17. kinectfusion的详细介绍
18. 2017华师在线计算机作业,华师2017春《计算机动画》在线作业
19. FPGA访问SRAM
20. 面试薪资谈好1万，邮件却写着“底薪3000+绩效7000”，合理吗？

热门文章

1. 《印制电路板（PCB）设计技术与实践》这本书真烂！！
2. 与App Store审核的斗智斗勇
3. 计算机三级网络技术第五章（第一轮）
4. 企业职工工资在线管理信息系统【数据建模与程序设计课程设计报告】
5. [-128，127]内十进制转二进制
6. php抓包腾讯大王卡token,【免流】腾讯大王卡变色龙自动抓包
7. uboot启动第二阶段
8. linux之文件系统
9. web实验1 div+css
10. android+wifi驱动移植,全志R16 android4平台移植wifi资料下载