LocalStorage在组件挂载之前不设置数据

Question

我通过使用localStorage创建购物车，我从ProductCard.vue发出EventBus到我的主App.vue的事件，用于全局存储数据到localStorage然后从productcard。vue获取这些值

Product.vue

<template>
<button
type="button"
class="product__btn add_to_cart_btn"

@click.prevent="addToCart(product)"
>
Add to cart
</button>
</template>
<script>
import { EventBus } from "../app";
export default {
name: "ProductCard",
methods: {
addToCart(product) {
this.addCartLoading = true
setTimeout(() => {
this.addCartLoading = false
EventBus.$emit('addToCart', product)
}, 300)
},
}
}
</script>

我在下面的App.vue中捕获了这个事件

App.vue

<script>
export default {
name: "App",
data() {
return {
shoppingCart: [],
}
},
created() {
EventBus.$on('addToCart', this.setCartContents)
},
methods: {
setCartContents(product) {
let productExistOnCart = this.shoppingCart.find(cart => cart.id === product.id)
if (product !== undefined && product !== null) {
this.shoppingCart.push({
id: product.id,
name: product.name,
qty: 1,
price: product.price,
options: {
old_price: product.old_price,
image: product.image,
}
})
localStorage.setItem('shoppingCart', JSON.stringify(this.shoppingCart))
}
},
}
}
</script>

然后我来到我的CartItemsWrapper.vue组件，它显示了我所有的项目添加并显示在列表中通过v-for循环cartitemswrapper。vue问题在这里，我删除了项目，但是它从我的this.shoppingCart和localstorage中删除，但是当我重新添加一些产品而不刷新页面localstorage所有删除的值再次出现在我的cart中，它没有完全删除，如果我刷新页面，然后在购物车中添加一些东西，那么好吧，我怎么能完全删除项目而不刷新页面?请大家帮帮我。

CartItemsWrapper.vue

<button type="button" class="remove-btn" @click.prevent="removeCart(cart)">
Remove
</button>
<script>
export default {
name: "CartItemsWrapper",
data() {
return {
shoppingCart: [],
}
},
methods: {
removeCart(cart) {
let cartItems = JSON.parse(localStorage.getItem('shoppingCart'))
for (let i = 0; i < cartItems.length; i++) {
if(cartItems[i].id == cart.id) {
cartItems.splice(i, 1);
break;
}
}
localStorage.setItem("shoppingCart", JSON.stringify(cartItems))
this.refreshCart()
},
}
}

这是GIF你可以看到它

Answer 1

查看代码后，我看到从购物车中删除项目时，您没有将其从App.vue上的本地状态shoppingCart中删除。因此，当您将任何新项目推入shoppingCart时，该项目将与其中的旧值一起添加。

你可以做的是，你可以从你的CartItemsWrapper.vue中触发一个事件总线EventBus.$emit('removed')，并从shoppingCart中删除该项目。

例子

// CartItemsWrapper.vue
removeCart(cart) {
let cartItems = JSON.parse(localStorage.getItem('shoppingCart'))
for (let i = 0; i < cartItems.length; i++) {
if(cartItems[i].id == cart.id) {
cartItems.splice(i, 1);
break;
}
}
localStorage.setItem("shoppingCart", JSON.stringify(cartItems))
// Emitting the event
EventBus.$emit('removed', cart.id)
this.refreshCart()
},

// App.vue
created() {
EventBus.$on('addToCart', this.setCartContents)
EventBus.$on('removed', this.removeCartContent)
},
methods: {
removeCartContent(cardId){
this.shoppingCart = this.shoppingCart.filter(item => item.id !== cardId )
}, 
...
}