Vue+Vant+Vuex实现本地购物车功能

通常，我们做移动端商城的时候，通常会有购物车模块，那购物车模块有两种实现方式，一是储存在后台通过接口获取到购物车信息，二是存在用户手机本地，第一种方法只要调用接口获取比较简单，这里介绍的是第二种方法，利用vuex将购物车数据存在本地的方法。

vue项目创建方法和vuex的写法之前博文都有介绍，这里就不再重复了;

vant安装：

# 通过 npm 安装
npm i vant -S

# 通过 yarn 安装
yarn add vant

具体使用方法请去它的官网了解

地址：https://youzan.github.io/vant/#/zh-CN/

购物车页面编写和本地的价格计算：

1.我们把vant按需引入，我们用到了Icon, Checkbox, Stepper, SubmitBar, Toast这些组件；

2.为了方便复制即用，我在本地写了一些购物车死数据goods用于渲染；

3.虽说是把商品信息购物车存在本地，实际上我们只需要存商品id和商品数量num；

4.我们需要通过单选的change事件，全选事件，步进器增加减少进行价格换算；

为了方便复制粘贴直接看效果，直接上demo

demo.html

上面代码没用到vuex,目的是方便复制在进去就能直接运行，上面代码同样适用于接口获取购物车的情况，进行本地价格计算，vuex我在下面分开介绍，按需添加进去；

store下的index.js

import Vue from "vue";
import Vuex from "vuex";
import app from "@/store/module/cart";
Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    cart
  }
});

上方代码我们创建了一个cart,专门用于购物车模块；

cart.js

export default {
  state: {
    // 购物车
    cartGoods: []
  },
  getters: {
    cartGoodIds(state) {
      return state.cartGoods.map(item => item.productId);
    }
  },
  mutations: {
    INIT_CART(state) {
      if (localStorage && localStorage.getItem("cartGoods")) {
        const goods = JSON.parse(localStorage.getItem("cartGoods"));
        state.cartGoods = goods;
      }
    },
    ADD_TO_CART(state, addGood) {
      const findGood = state.cartGoods.find(
        item => item.productId === addGood.productId
      );
      if (findGood) {
        findGood.num = findGood.num + addGood.num;
      } else {
        state.cartGoods.push(addGood);
      }
      if (localStorage) {
        localStorage.setItem("cartGoods", JSON.stringify(state.cartGoods));
      }
    },
    INPUT_TO_CART(state, inpGood) {
      const findGood = state.cartGoods.find(
        item => item.productId === inpGood.productId
      );
      const largeGood = state.cartGoods.find(item => item.num > inpGood.num);
      const equalGood = state.cartGoods.find(item => item.num == inpGood.num);
      const smallGood = state.cartGoods.find(item => item.num < inpGood.num);
      if (findGood && largeGood) {
        findGood.num = findGood.num - (findGood.num - inpGood.num);
      }
      if (findGood && equalGood) {
        findGood.num = inpGood.num;
      }
      if (findGood && smallGood) {
        findGood.num = inpGood.num;
      }
      if (localStorage) {
        localStorage.setItem("cartGoods", JSON.stringify(state.cartGoods));
      }
    }
  }
};

 

上方我们定义了一些计算方法和事件方法，来在其他页面调用时改变购物车储存的信息；

其他页面：

// 导入
import { mapGetters, mapMutations } from "vuex";
// 计算
computed: {
   ...mapGetters(["cartGoodIds"])
},
// 方法
methods: {
    ...mapMutations(["ADD_TO_CART", "INPUT_TO_CART", "INIT_CART"]),
}
// 使用
// 增加
// 增加
plusadd(item) {
  this.$store.commit("ADD_TO_CART", {
    productId: item.id,
    num: 1
  });
},
// 减少
minuscut(item) {
  this.$store.commit("ADD_TO_CART", {
    productId: item.id,
    num: -1
  });
},
// 输入
blurinput(item) {
  this.$store.commit("INPUT_TO_CART", {
    productId: item.id,
    num: parseInt(item.num)
  });
},

 

就先粗略的介绍到这里，有什么问题提出来我及时改正，谢谢！