Vue学习Day19 vuex管理购物车商品数据、将商品添加到购物车

想利用暑假时间好好学习一下vue，会记录每一天的学习内容。
今天是学习vue的第19天！

起起伏伏乃人生常态，继续加油～

---

---

将商品添加到购物车

获取购物车商品数据

加入购物车按钮在底部工具栏的组件DetailBottomBar中

首先监听该按钮的点击事件

<!-- DetailBottomBar.vue -->
....
<div class="cart" @click="addToCart">加入购物车</div>

并将此事件发射出去

methods: {
  addToCart() {
   this.$emit('add-to-cart');
  }
}

由父组件Detail.vue监听并处理

<!-- Detail.vue -->
<detail-bottom-bar @add-to-cart="addToCart">

上面我们获取了很多关于商品的信息，但并不是所有都需要展示到购物车中，这里只提取购物车需要的商品数据

addToCart() {
  // 获取购物车需要的商品数据
  const product = {};
  product.image = this.topImages[0];
  product.title = this.goodsInfo.title;
  ...
  // 将商品添加到购物车里
}

---

使用vuex管理购物车商品数据

我们将用Vuex管理这个数据，因为可能多个页面都需要使用这个数据

安装Vuex

npm install vuex --save

配置：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
  },
  mutations: {
  }
})

export default store;

在main.js中导入、挂载：

import Vue from 'vue'
import App from './App.vue'


import router from './router'
import store from './store'
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

在state中创建一个cartList保存商品

state: {
  // [商品1，商品2，商品3...]
  cartList: []
},

addToCart() {
  // 1.获取购物车需要展示的信息
  const product = {}
  product.image = this.topImages[0];
  ...
  // 2.将商品添加到购物车中
  this.$store.commit('addToCart', product);
}

通过mutations将商品添加进cartList：

mutations: {
  addToCart(state,payload){
  	state.cartList.push(payload);
  }
}

---

展示购物车商品数据

Cart.vue：

<template>
  <div id="cart">
    <nav-bar>
      <template #center>购物车（{{cartLength}}）</template>
    </nav-bar>
  </div>
</template>

通过$store.state.cartList就能拿到购物车商品数据

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

商品列表可以再新建一个组件CartList，单个商品信息的展示再新建一个组件CartListItem
(这里不细写了)

---

购物车选择框

购物车商品的选择框可以再封装成一个组件CheckButton

选中与不选中要在对象模型中记录，应该在state的cartList中新加一个属性checked，这里默认选中

mutations: {
  addCart(state,payload){
    // 默认选中
    payload.checked = true
  	state.cartList.push(payload);
  }
}

在组件CheckButton中定义一个props为isChecked，通过这个值动态绑定一个类来控制样式变化

<!-- CheckButton.vue-->
<div class="check-button" :class="{check: isChecked}">

这个isChecked的值就要通过父子通信，由父组件CartListItem传给CheckButton

props: {
  isChecked: Boolean
}

.check {
  background: red
}

并且需要监听CheckButton的点击事件，可以在CheckButton.vue中监听，也可以在CartListItem.vue中使用了CheckButton组件的时候监听，只是这里组件监听原生事件要加.native

<!-- CartListItem.vue -->
<check-button @click.native="checkCheck" :value="$store.state.cartList.checked"></check-button>

处理CheckButton的点击事件使checked的值取反就行

// CartListItem.vue
methods: {
  checkClick() {
    this.$store.commit('changeCheck');
  }
}

mutations: {
  changeCheck(state) {
    state.cartList.checked = !state.cartList.checked;
  }
}

---

购物车的全选按钮

• 显示全选按钮的状态
  • 判断是否有一个不选中 => 全选按钮状态就是不选中

<!-- CartBottomBar.vue -->
<check-button :is-checkd="isSelectAll"></check-button>

computed: {
  isSelectAll() {
  	if (this.$store.state.cartList.length === 0) return false;
  	// 从cartList数组中过滤出来没被选中的，则该未被选中的数组如果有长度，且再取反就是false
    return !(this.$store.state.cartList.filter(item => !item.checked).length)
  }
}

• 点击全选按钮
  • 如果原来都是选中的，点击 => 全部不选中
  • 如果原来有某些不选中，点击 => 全部选中

监听组件的原生点击事件：

<!-- CartBottomBar.vue -->
<check-button :is-checkd="isSelectAll" @click.native="checkClick"></check-button>

methods: {
  checkClick() {
    // 都是选中
    if (this.isSeletedAll) {
      this.$store.commit('turnFalseCheck');
    } else {
      this.$store.commit('turnTrueCheck');
    }
  }
}

mutations: {
  turnFalseCheck(state) {
    state.cartList.forEach(item => item.checked = false);
  },
  turnTrueCheck(state) {
    state.cartList.forEach(item => item.checked = true);
  },
}

---

这个项目差不多就完了，虽然不是很完善，主要练习一下运用之前学的一些基础知识吧