如何在Vue JS与Inertia JS项目中使用Laravel Helper？

首先明确核心逻辑：Vue运行在用户端浏览器，Laravel的PHP Helper运行在服务端，二者环境完全隔离，没法像Blade（后端渲染模板）那样直接调用PHP方法，你可以根据自己的业务场景选下面两种方案：

方案1：控制器预传数据（Inertia官方推荐，性能最好） #

这是最符合Inertia设计思路的做法，在控制器渲染页面前就把需要的计数算好，通过props传给Vue组件即可。
控制器代码示例：

// 对应页面的控制器方法
public function detail($postId)
{
    // 你的其他业务逻辑
    $post = Post::findOrFail($postId);
    // 提前调用Helper算好需要的数值
    $likeCount = Helper::reaction_count($postId, 'like');
    $hateCount = Helper::reaction_count($postId, 'hate');

    return Inertia::render('Post/Detail', [
        'post' => $post,
        'likeCount' => $likeCount,
        'hateCount' => $hateCount
    ]);
}

Vue组件里直接接收props使用：

<script setup>
// 接收控制器传过来的数据
const props = defineProps(['post', 'likeCount', 'hateCount'])
</script>

<template>
  <div class="reaction-bar">
    <button>👍 {{ props.likeCount }}</button>
    <button>👎 {{ props.hateCount }}</button>
  </div>
</template>

如果这个计数是全站通用的，不需要和特定页面绑定，你可以直接在app/Http/Middleware/HandleInertiaRequests.php的share方法里做全局共享，不用每个控制器单独传。

方案2：写内部接口按需调用（适合动态交互场景） #

如果你的业务需要在前端根据用户操作、不同参数动态获取不同内容的反应计数（比如滚动加载列表时实时拿新内容的计数、切换反应类型实时查数），预传所有数据不现实，可以加一个轻量的内部接口，前端发请求拿结果。
首先加路由：

// routes/web.php
Route::get('/helper/reaction-count', function(\Illuminate\Http\Request $request) {
    $params = $request->validate([
        'target_id' => 'required|integer',
        'reaction_type' => 'required|string'
    ]);
    return [
        'count' => Helper::reaction_count($params['target_id'], $params['reaction_type'])
    ];
})->middleware(['web', 'auth']); // 按需配置中间件

Vue组件里需要的时候发请求获取即可：

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const reactionCount = ref(0)
// 按需调用获取计数
const loadCount = async (id, type) => {
    const { data } = await axios.get('/helper/reaction-count', {
        params: { target_id: id, reaction_type: type }
    })
    reactionCount.value = data.count
}
</script>

注意：不要试图找什么直接在JS里调用PHP方法的奇技淫巧，本质上所有前端获取服务端数据的逻辑都是通过HTTP请求传递，Blade能直接调用是因为模板是在服务端用PHP渲染完再发给浏览器的，和Inertia下前后端分离的运行逻辑有本质区别。

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