2、仿照水果购物车案例实现图书购物车。 vue
时间: 2024-09-08 22:01:30 浏览: 19
在Vue.js中,我们可以仿照水果购物车的功能来创建一个图书购物车功能。首先,我们需要设置以下几个关键组件:
1. **商品列表** (BookList): 这将显示所有可用的图书,并包含每个图书的名称、作者、价格等信息。点击图书时,可以将其添加到购物车。
```javascript
<template>
<ul>
<li v-for="book in books" :key="book.id">
<a @click="addToCart(book)">{{ book.title }} - {{ book.author }} - {{ book.price }}</a>
</li>
</ul>
</template>
<script>
export default {
data() {
return { books: [] };
},
methods: {
addToCart(book) {
this.cart.push(book);
}
}
};
</script>
```
2. **购物车列表** (CartList): 显示已选图书和总价。初始时为空,当有图书加入购物车时更新。
```html
<template>
<div v-if="cart.length > 0">
<h2>购物车</h2>
<ul>
<li v-for="item in cart" :key="item.id">
{{ item.title }} - {{ item.author }} - {{ item.price }}
</li>
</ul>
<p>总价: {{ calculateTotalPrice() }}</p>
</div>
</template>
<script>
export default {
computed: {
totalItems() {
return this.cart.length;
},
totalPrice() {
let sum = 0;
this.cart.forEach(item => {
sum += item.price;
});
return sum;
}
},
methods: {
calculateTotalPrice() {
// 算法实现总价格计算
}
}
};
</script>
```
3. **购物车状态管理** (CartService): 可以使用Vuex来管理全局的状态,包括购物车的商品列表和总价。
```javascript
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
const state = {
cart: []
};
const mutations = {
addItem(state, book) {
state.cart.push(book);
},
removeItem(state, id) {
state.cart = state.cart.filter(item => item.id !== id);
}
};
const actions = {
addItem({ commit }, book) {
commit('addItem', book);
},
removeItem({ commit }, id) {
commit('removeItem', id);
}
};
export default new Vuex.Store({
state,
mutations,
actions
});
```
然后,在需要的地方注入`store`并使用它:
```javascript
import { mapState, mapActions } from 'vuex';
export default {
computed: {
...mapState(['cart']),
totalPrice() {
// ...
}
},
methods: {
...mapActions(['addItem', 'removeItem'])
}
};
```
这样就实现了基本的图书购物车功能。用户可以通过点击商品列表中的图书,将其添加到购物车,同时显示购物车的总价格。如有更多需求,例如清空购物车、编辑价格等,可以根据实际情况添加相应功能。