VILT Stack项目中浏览器后退后购物车计数显示陈旧数据问题求助

你遇到的问题核心是Inertia.js的页面缓存机制：为了优化导航速度，Inertia会缓存已访问过的页面。当你添加商品到购物车后，浏览器后退到之前的页面时，Inertia会直接从缓存中加载页面，不会重新请求后端获取最新的cart共享数据，导致组件显示的是缓存的旧计数。

另外，你的HandleInertiaRequests中间件代码有个小问题：返回共享数据时应该用array_merge合并父类数据和自定义数据，而不是把父类数据作为数组元素。之前的写法会让父类共享数据嵌套在数组的第一个元素里，虽然当前功能正常，但不符合规范，建议修正。

1. 修正共享数据的合并方式 #

先把后端中间件的代码改对，确保cart和其他共享数据平级：

public function share(Request $request): array
{
    $cart = session()->get('cart', []);
    // 用array_merge合并父类共享数据和自定义cart数据
    return array_merge(parent::share($request), ['cart' => $cart]);
}

2. 页面激活时刷新购物车数据 #

在购物车组件中，利用Vue的onActivated钩子（适配Inertia的页面缓存机制），触发Inertia的局部重载，只更新cart数据，不会影响页面其他内容：

<script setup>
import { Link } from "@inertiajs/vue3";
import Cart from "@/Icons/Cart.vue";
import { computed, onActivated } from "vue";
import { usePage, router } from "@inertiajs/vue3";

const page = usePage();
const cartCount = computed(() => page.props.cart.length);

// 当页面从缓存中被激活时，局部重载cart数据
onActivated(() => {
  router.reload({
    only: ['cart'], // 只请求cart共享数据
    preserveState: true, // 保留页面状态
    preserveScroll: true // 保留滚动位置
  });
});
</script>

<template>
    <Link :href="route('cart')" >
        <Cart />
        <div>
            <p>{{ cartCount }}</p>
        </div>
    </Link>
</template>

3. 添加商品后主动更新前端购物车数据 #

在添加商品到购物车的请求回调中，直接更新page.props.cart，避免依赖页面重载：

// 假设这是你添加商品的请求代码
import { router } from '@inertiajs/vue3';

async function addToCart(productId) {
  await router.post(route('cart.add'), { product_id: productId }, {
    onSuccess: (response) => {
      // 如果后端返回了更新后的购物车数据，直接替换
      if (response.props?.cart) {
        const page = usePage();
        page.props.cart = response.props.cart;
      }
    }
  });
}

4. 禁用页面缓存（不推荐） #

如果以上方法都不适用，可以通过设置HTTP头禁止浏览器缓存页面，但这会牺牲Inertia的导航性能：
在HandleInertiaRequests的share方法中添加缓存控制头：

public function share(Request $request): array
{
    // 设置禁止缓存的HTTP头
    $request->headers->set('Cache-Control', 'no-cache, no-store, must-revalidate');
    $request->headers->set('Pragma', 'no-cache');
    $request->headers->set('Expires', '0');

    $cart = session()->get('cart', []);
    return array_merge(parent::share($request), ['cart' => $cart]);
}

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