Inertia.js中Axios请求后无需后端触发<flash-messages />的方法

背景说明 #

在Laravel+Inertia项目中，控制器里可以通过以下代码触发布局内的<flash-messages />组件：

$redirect('/')->with('success', 'cart updated successfully!');

但使用Axios发起API请求时，无法通过后端session的flash数据触发该组件（当前控制台输出的flash对象中success和error均为null），需要实现不依赖后端的触发方式。

当前代码参考 #

HandleInertiaRequest中间件代码

class HandleInertiaRequests extends Middleware
{
    /**
     * The root template that's loaded on the first page visit.
     *
     * @see https://inertiajs.com/server-side-setup#root-template
     * @var string
     */
    protected $rootView = 'app';

    /**
     * Determines the current asset version.
     *
     * @see https://inertiajs.com/asset-versioning
     * @param  \Illuminate\Http\Request  $request
     * @return string|null
     */
    public function version(Request $request): ?string
    {
        return parent::version($request);
    }

    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            "flash" => function () use ($request) {
                return [
                    "success" => $request->session()->get("success"),
                    "error"   => $request->session()->get("error"),
                ];
            },
        ]);
    }
}

Axios请求代码

addToCart() {
     axios.post(`/api/v1/carts`, {
         name: '....',
                
     }).then(() => {
         this.$inertia.reload({
              onSuccess: page => { console.log(page) },
         })
     }).catch(() => {
          this.$inertia.reload({
              onError: errors => { console.log(errors) },
          })
     })
},

控制台输出

{
  // ...其他内容
  flash: {success: null, error: null}
}

解决方案 #

方案一：前端独立维护Flash状态（推荐）

直接在组件内维护本地flash状态，将状态传递给<flash-messages />组件，完全不依赖后端session：

1. 修改页面组件代码：

<template>
  <div>
    <!-- 将本地flash状态传给组件 -->
    <flash-messages :messages="localFlash" />
    <!-- 其他业务内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      localFlash: {
        success: null,
        error: null
      }
    }
  },
  methods: {
    addToCart() {
      axios.post(`/api/v1/carts`, {
        name: '....',
      }).then(() => {
        // 设置成功提示
        this.localFlash.success = '购物车更新成功！';
        // 可选：3秒后自动清除提示
        setTimeout(() => {
          this.localFlash.success = null;
        }, 3000);
      }).catch(() => {
        // 设置错误提示
        this.localFlash.error = '添加到购物车失败，请重试！';
        setTimeout(() => {
          this.localFlash.error = null;
        }, 3000);
      })
    }
  }
}
</script>

2. 调整<flash-messages />组件，使其接收messages props：

<template>
  <div>
    <div v-if="messages.success" class="alert alert-success">
      {{ messages.success }}
    </div>
    <div v-if="messages.error" class="alert alert-danger">
      {{ messages.error }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    messages: {
      type: Object,
      default: () => ({ success: null, error: null })
    }
  }
}
</script>

方案二：结合Inertia Props更新Flash状态

如果希望继续使用Inertia共享的flash结构，可以通过$inertia.setProps直接更新页面props：

addToCart() {
  axios.post(`/api/v1/carts`, {
    name: '....',
  }).then(response => {
    // 从API响应中获取提示内容（也可以直接写死）
    const successMsg = response.data?.success || '购物车更新成功！';
    this.$inertia.setProps({
      flash: { success: successMsg }
    });
    // 可选：自动清除
    setTimeout(() => {
      this.$inertia.setProps({
        flash: { success: null }
      });
    }, 3000);
  }).catch(error => {
    const errorMsg = error.response?.data?.error || '添加失败，请重试！';
    this.$inertia.setProps({
      flash: { error: errorMsg }
    });
    setTimeout(() => {
      this.$inertia.setProps({
        flash: { error: null }
      });
    }, 3000);
  })
}

注意：需要确保<flash-messages />组件能响应flash props的变化（比如添加watch监听）。

总结 #

方案一无需依赖后端，实现更灵活，适合纯API请求的场景；方案二更贴合现有Inertia共享数据的结构，可根据项目需求选择。

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