Vue购物车的产品变化正在添加到购物车中，但购物车中的项目发生了变化，而不是添加新项目

Question

我有一个vue版本的"^2.6.11"应用程序，带有vuex，我在其中向购物车添加项目。我的商品有颜色等变化，所以在添加到购物车之前，我有两个条件来比较颜色和产品ID。

product.productId == item.productId && product.colour == item.colour

颜色是从选择框中选择的，产品的特性是用选择框中的更改事件中选择的颜色设置的。

this.item.colour = event.target.value

问题是，即使颜色发生变化，它也会更新购物车中的当前项目，例如：

• 选择框显示金色，点击"添加到购物车"，将一个金色项目添加到购物篮。

• 选择框更改为银色，产品组件的颜色属性更改为银色并单击"添加到购物车"。

• 购物车数量中的当前项目更改为2及其颜色变为银色。

奇怪的是，当我导航到收银台，然后单击后退按钮时，添加到购物车会按照我希望的方式工作，将商品的新变体添加到购物篮中，然而，当我添加另一个变体后，它会像第一次一样工作。

我希望这是有道理的。我不明白为什么在点击后退按钮之前它不起作用。

我无法设置Jsfidle或代码狙击坑，因为这里有太多组件在一起工作，所以我将在下面添加一些代码。

// Product.vue
<template>
<div>
<b-col>
<b-card
v-bind:title="product_type"
v-bind:img-src="imagePath"
img-alt="Image"
img-top
tag="article"
style="max-width: 15rem;"
class="mb-2">
<b-card-text>{{ product_type }}</b-card-text>
<div class="form-group">
<label for="colourSelect">Please select a colour</label>
<select @change="onChange($event)">
<option v-for="item in metal_colour" v-bind:key="item">
{{ item }}
</option>
</select>
</div>
<div class="clearfix">
<div class="price pull-left" v-bind:key="price">€{{ price }}</div>
<div class="text-right">
<b-button @click="addToCart" variant="primary">Add to cart</b-button>
...
</template>
<script>
export default {
name: 'Product',
props: {
productId: Number,
imagePath: String,
product_type: String,
metal_colour: Array,
price: Number,
qty: Number
},
data() {
return {
item: {
productId: this.productId,
imagePath: this.imagePath,
product_type: this.product_type,
price: this.price,
colour: 'Gold',
qty: 1
}
}
},
methods: {
addToCart() {
this.$store.commit('addToCart', this.item)
this.$bvModal.show('modal-1')
},
onChange(event) {
this.item.colour = event.target.value
}
}
}
</script>

// store/index.js Vuex
...
mutations: {
addToCart(state, item) {
let found = state.inCart.find(
product =>
product.productId == item.productId && product.colour == item.colour
)
if (found) {
found.qty++
} else {
state.inCart.push(item)
}
}
},
...

对于我的购物车，我使用的是模态，项目如下所示：

// Cart.vue
<div>
<b-table striped :items="this.$store.state.inCart">
<template v-slot:cell(imagePath)="data">
<img :src="data.value" class="thumb" alt="product" />
{{ data.imagePath }}
</template>
</b-table>
</div>
<div slot="modal-footer">
<router-link to="/checkout">
<b-button variant="primary" @click="$bvModal.hide('modal-1')">
Checkout
</b-button>
</router-link>
<b-button class="modalBtn" variant="primary" @click="$bvModal.hide('modal-1')">
Continue Shopping
</b-button>
</div>

Answer 1

您在<template>标记中使用了this>this.$store.state.inCart，应该只是$store.state.inCart，但它应该已经标记了一个错误，并且永远不会实际工作。

<b-table striped :items="$store.state.inCart">

你可能有反应性问题，试试这个：

import {mapState} from 'vuex'

computed: {
...mapState(['inCart'])
}

<b-table striped :items="inCart">

---

最后，当您将项目添加到购物车时，您需要添加item对象的副本，因为您通过引用传递对象，并且由于执行state.inCart.push(item)而导致意外行为。

有两种选择：

1( 导入lodash>import { copy } from 'lodash'并使用copy(item)

2(JSON.parse(JSON.stringify(item))看起来很脏，但速度很快。

这两种方法将取消对对象的引用。

为了澄清，您可以在vuexaddToCart方法中执行此复制过程：

addToCart(state, item) {
let found = state.inCart.find(
product => product.productId === item.productId && product.colour === item.colour
)
if (found) {
found.qty++
} else {
// Clone the object.
const insert = JSON.parse(JSON.stringify(item))
state.inCart.push(insert)
}
}