Me gustaría agregar mi objeto de mi conjunto de artículos, solo una vez a mi carrito. Ahora mismo puedes añadir el mismo objeto varias veces. Tengo mi matriz en un archivo index.js y mis datos provienen de la tienda (index.js). El idioma con el que estoy trabajando es Vue3 con enrutador.
<div v-if="product" class="product-details"> <h3 class="text-center">{{ product.name}}</h3> <p class="description">{{ product.description }}</p> <img :src ="` ${ product.img }`"/> <h3 class="text-center">{{ product.price.toFixed(2)}} Euro</h3> <div class="cart-total" v-if="product_total"> <h3>In Cart</h3> <h4>{{ product_total}}</h4> </div> <div class="button-container"> <button class="add" @click="addToCart()"> Add</button> </div> </div> </div> </template> <script> export default{ data(){ return{ } }, props:['product', 'active'], methods: { addToCart() { this.$store.commit('addToCart', this.product) } }, computed: { product_total(){ return this.$store.getters.productQuantity(this.product) } } } mutations: { addToCart(state, product) { let item = state.cart.find(i => i.id === product.id) if (item){ item.quantity++ } else { state.cart.push({...product, quantity: 1}) } updateLocalStorage(state.cart) },No agregue cantidad como esa. porque si agrega una cantidad adicional que, vue js, esa propiedad no reacciona de manera predeterminada. entonces tenemos que decirle a vue , por reactividad, para que vue pueda hacer getter y setter para ese objeto.
mutations: { addToCart(state, product) { ... if (item){ item.quantity++ } else { Vue.set(item,'quantity',1) // now vue will add getters and setters for this key quantity . now quantity change will automatically reflect. } ... },puedes consultar este maravilloso artículo. https://medium.com/js-dojo/reactividad-en-vue-js-y-sus-pitfalls-de07a29c9407