Vue.js路由切换时如何最优保留子组件购物车数据？

路由切换时购物车状态丢失的本质原因是：不同父视图下的同名子组件会走独立的挂载、销毁流程，Vue不会跨父级组件树复用组件实例，组件内部维护的状态自然会跟着实例销毁被清空。按照你要求的「子组件保持无状态、业务逻辑统一收敛」的原则，不要用缓存父视图、组件内部硬编码状态这类绕弯方案，直接用全局状态层托管购物车逻辑是成本最低、维护性最好的方案。

具体实现步骤 #

• 抽离独立的购物车状态模块
  优先复用项目已有的状态管理能力：Vue3项目用Pinia，Vue2老项目用Vuex，要是项目没引入状态库，直接在utils目录下导出一个用reactive声明的全局对象也能实现完全一致的效果。所有购物车相关的状态、计算属性、操作方法全部收敛在这个独立模块里，和具体组件、视图完全解耦，其他业务模块（比如商品卡片的加入购物车按钮）也可以直接调用模块方法，不需要跨组件通信。
  最小Pinia实现参考：

  // src/stores/cart.js
  import { defineStore } from 'pinia'
  import { ref, computed } from 'vue'
  
  export const useCartStore = defineStore('cart', () => {
    const cartItems = ref([])
    // 总价、商品总数全部用计算属性自动派生，不用手动维护
    const totalPrice = computed(() => cartItems.value.reduce((sum, item) => sum + item.price * item.count, 0))
    const totalCount = computed(() => cartItems.value.reduce((sum, item) => sum + item.count, 0))
  
    // 所有购物车操作方法统一在这里实现
    const addGoods = (goods) => {
      const existItem = cartItems.value.find(item => item.id === goods.id)
      existItem ? existItem.count++ : cartItems.value.push({...goods, count: 1})
    }
    const updateCount = (goodsId, newCount) => {
      const target = cartItems.value.find(item => item.id === goodsId)
      if (target) target.count = Math.max(1, newCount)
    }
    const removeGoods = (goodsId) => {
      cartItems.value = cartItems.value.filter(item => item.id !== goodsId)
    }
    const clearCart = () => cartItems.value = []
  
    return { cartItems, totalPrice, totalCount, addGoods, updateCount, removeGoods, clearCart }
  })
  

• 保持购物车组件为纯无状态（哑）组件
  购物车组件内部不要存任何业务数据，只负责渲染UI、绑定交互事件，需要的数据直接从状态模块读取，交互触发的操作直接调用状态模块暴露的方法，完全不需要感知当前所在的父视图是哪个。
  组件示例：

  <!-- src/components/CartPanel.vue -->
  <template>
    <div class="fixed-right-cart">
      <h3>购物车（{{ totalCount }}）</h3>
      <div class="cart-goods-list">
        <div v-for="goods in cartItems" :key="goods.id" class="cart-item">
          <span class="goods-name">{{ goods.name }}</span>
          <div class="count-control">
            <button @click="updateCount(goods.id, goods.count - 1)">-</button>
            <span>{{ goods.count }}</span>
            <button @click="updateCount(goods.id, goods.count + 1)">+</button>
          </div>
          <button @click="removeGoods(goods.id)" class="delete-btn">删除</button>
        </div>
      </div>
      <div class="cart-total">合计：¥{{ totalPrice.toFixed(2) }}</div>
    </div>
  </template>
  <script setup>
  import { useCartStore } from '@/stores/cart'
  // 直接从状态模块拿数据和方法，不需要父组件传参
  const { cartItems, totalPrice, totalCount, updateCount, removeGoods } = useCartStore()
  </script>
  

• 父视图零业务逻辑引入
  6个父视图里不需要写任何购物车相关的状态、方法，只需要引入组件渲染即可，不会产生冗余代码：

  <!-- 首页、商品详情、分类页、个人中心等任意父视图内 -->
  <template>
    <!-- 页面原有业务内容 -->
    <CartPanel />
  </template>
  <script setup>
  import CartPanel from '@/components/CartPanel.vue'
  </script>
  

可选优化 #

• 如果需要刷新页面后保留购物车数据，给状态管理库加对应持久化插件即可，Pinia用pinia-plugin-persistedstate，Vuex用vuex-persistedstate，不需要手动写localStorage读写逻辑。
• 如果不想在6个父视图里重复写组件引入代码，直接把CartPanel放到路由的根布局组件里（也就是包裹<router-view />的公共布局层），只需要写一次，所有路由页面自动渲染购物车，维护成本更低。

避坑提醒：不要用keep-alive缓存所有父视图来实现状态保留，6个视图全量缓存会额外占用内存，遇到列表实时刷新、滚动位置重置这类需求还要单独处理缓存规则，属于本末倒置的方案；也不要用事件总线、props逐级透传的方式同步购物车数据，后期功能迭代时排查问题的成本会极高。

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