Vue基于localStorage实现购物车，删除商品后不刷新再添加已删项复现如何解决？

问题根因 #

核心是多个组件维护了独立的购物车状态副本，没有实现跨组件同步：

• App.vue 里保存了一份 shoppingCart 数据作为添加商品的基准
• CartItemsWrapper.vue 里单独维护了自己的 shoppingCart 副本
• 你在删除商品时，只更新了 CartItemsWrapper 的本地数据和 localStorage，App.vue 里的旧 shoppingCart 数组完全没有变动
• 后续添加商品时，App 还是往自己保存的旧数组里新增数据，再覆盖到 localStorage，自然就把之前删除的商品又恢复了

最小改动修复方案（基于现有 EventBus 逻辑） #

第一步：修改 CartItemsWrapper.vue

删除商品时发送事件通知全局同步状态，同时优化删除逻辑避免索引错误：

<button type="button" class="remove-btn" @click.prevent="removeCart(cart)">
  Remove
</button>

<script>
// 先引入EventBus
import { EventBus } from "../app";

export default {
    name: "CartItemsWrapper",
    data() {
        return {
            shoppingCart: [],
        }
    },
    methods: {
       removeCart(cart) {
          let cartItems = JSON.parse(localStorage.getItem('shoppingCart')) || []
          // 用filter过滤删除目标，比splice遍历更简洁，不会出现索引遍历错误
          cartItems = cartItems.filter(item => item.id !== cart.id)
          localStorage.setItem("shoppingCart", JSON.stringify(cartItems))
          // 发送删除事件，通知App同步更新全局购物车
          EventBus.$emit('removeFromCart', cart.id)
          this.refreshCart()
       },
   }
}
</script>

第二步：修改 App.vue

监听删除事件同步更新本地购物车，同时补充初始化逻辑和已有商品判断逻辑：

<script>
import { EventBus } from "../app";

export default {
    name: "App",
    data() {
        return {
            shoppingCart: [],
        }
    },
    created() {
       EventBus.$on('addToCart', this.setCartContents)
       // 监听删除事件
       EventBus.$on('removeFromCart', this.removeCartItem)
       // 补充初始化逻辑：页面加载时从localStorage读取已有购物车数据
       const savedCart = localStorage.getItem('shoppingCart')
       if (savedCart) {
         this.shoppingCart = JSON.parse(savedCart)
       }
    },
    methods: {
        // 新增删除商品的同步方法
        removeCartItem(productId) {
          this.shoppingCart = this.shoppingCart.filter(item => item.id !== productId)
          localStorage.setItem('shoppingCart', JSON.stringify(this.shoppingCart))
        },
        setCartContents(product) {
            if (!product) return
            // 补上之前写了但未使用的重复商品判断逻辑，避免同一个商品重复添加生成多条记录
            let productExistOnCart = this.shoppingCart.find(cart => cart.id === product.id)
            if (productExistOnCart) {
              // 已存在的商品直接累加数量
              productExistOnCart.qty += 1
            } else {
              // 不存在的商品才新增条目
              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>

更推荐的长期方案 #

如果项目复杂度稍高，建议使用 Vuex（Vue2）或 Pinia（Vue3）做全局状态管理，把购物车的增删改查、持久化逻辑都统一放到全局 Store 中，所有组件共用同一份购物车状态，从根源上避免多副本不同步的问题。

内容的提问来源于stack exchange，提问作者Shekh Saifuddin