Vue实战项目购物车 Cart

2020-08-01

1 获取数据

在 vuex 中存储了商品数据，mapGetters 辅助函数映射到 computed 中，就可以直接使用 getters 中的属性。

// 从 vuex 中导入
import { mapGetters } from "vuex";
computed: {
    ...mapGetters(["cartList"]),
  },

2 导航栏

复用 NavBar 组件

商品的数量 ：reduce方法适用于数组的加和计算。

cartLength(state) {
    return state.cartList.reduce((preValue, item) => {
        return preValue + item.count;
    }, 0);
},

3 商品信息展示

封装 CartList 和 CartListItem 组件。CartListItem 展示商品信息，内部封装 checkButton（选中和不选中按钮）

1) 把 isChecked 属性添加到 product 商品模型中

1 2	// 默认是 true 已经被选中 payload.isChecked = true

2）CartListItem 动态监听按钮的点击事件，每次点击将 isChecked 值取反。

1	<check-button @click.native="checkClick" :isChecked="proudcts.isChecked" />

3）点击商品列表，进入商品的详情页。

1
2
3

productClick() {
   this.$router.push("/detail" + this.proudcts.iid);
 },

4）监听 checkButton 点击事件发生冒泡，stop修饰符

4 底部结算按钮

封装 CartBottomBar 组件

1）全选按钮，复用 checkButton

2）总价钱，利用 fliter 和 reduce 方法

3）总数量，利用 fliter 方法

totalPrice() {
  return ( "￥" + this.cartList.filter((item) => {
        return item.isChecked;
      }).reduce((preValue, item) => {
        return preValue + item.price * item.count;
      }, 0).toFixed(2)
  );
},

4.1 全选按钮

显示状态：判断有一个不选，就不选中，否则选中

isSelectAll() {
  //  find 找到就返回该成员，否则 undefined
  if (this.cartList.length === 0) return false;
  return !this.cartList.find((item) => !item.isChecked);
},

点击全选按钮

checkClick() {
  // 现在处于全部选中状态
  if (this.isSelectAll)
    this.cartList.forEach((item) => (item.isChecked = false));
  // 不全选中状态
  else this.cartList.forEach((item) => (item.isChecked = true));
},

5 购物车功能完善

5.1 vuex 传递信息

添加购物车属于异步操作。

vuex 做了某些操作，想让外面知道，通过 promise 传递。

比如添加购物车，将商品信息存储在 vuex，如果添加成功，需要弹出弹框提示用户。

// actions 方法    
addCart(context, payload) {
        return new Promise((resolve) => {
            let oldProduct = context.state.cartList.find(item => item.iid === payload.iid)
            if (oldProduct) {
                context.commit(ADD_COUNT, oldProduct)
                resolve('商品数量 + 1')
            } else {
                payload.count = 1
                payload.isChecked = true
                context.commit(ADD_TO_CART, payload)
                resolve('添加商品成功')
            }
        })
    
---  ----    
        
// 在组件中dispatch vuex 的 actions
      this.$store.dispatch("addCart", product).then((res) => {
        console.log(res);
      });

5.2 mapActions 辅助函数

mapActions 的映射关系，先组件中导入 mapActions，然后在 methods 映射，actions中的方法就相当于 methods 中方法。

 methods: { 
...mapActions(["addCart"]),     
     
     this.addCart(product).then((res) => {
        console.log(res);
      });

6 Toast 封装 — 插件方式的封装

1）封装 Toast 组件，其他对象可以调用 show 方法显示，或者隐藏 toast

data() {
  return {
    messages: "",
    isShow: false,
  };
},
methods: {
  show(messages = "默认文字", duration = 2000) {
    this.isShow = true;
    this.messages = messages;
    setTimeout(() => {
      this.isShow = false;
      this.messages = "";
    }, duration);
  },
},

2）在 main.js 中安装 toast 插件

import toast from './components/common/toast';

// 安装 toast 插件 use 方法本质是在调用 toast 对象的 install 方法
Vue.use(toast)

3）实现 toast 对象的 install方法，需要创建组件构造器

import Toast from './Toast';// Toast组件对象
const obj = {}

//install 默认传入一个参数 Vue，不需要再 import Vue
obj.install = function(Vue) {
    
    // 1. 创建组建的构造器
    const toastContrustor = Vue.extend(Toast);

    // 2.new 的方式，根据组件的构造器，可以创造出来一个组件对象
    const toast = new toastContrustor();

    // 3.将组件对象 手动挂载到某一个元素上
    toast.$mount(document.createElement('div'))

    // 4.toast.$el 对应的就是 div
    document.body.appendChild(toast.$el)
    
    // 5. $toast 添加到 Vue 原型，通过 $toast 拿到 toast 对象
    Vue.prototype.$toast = toast
}
export default obj

5）使用 toast 对象中的方法

1
2
3

this.addCart(product).then((res) => {
  this.$toast.show(res, 2000);
});