如何在 this.$page.props.user 中使用惯性js设置上传的头像？

Question

在 Laravel 8 应用程序中，带有惯性js/惯性-vue 0.7/vuejs2，带有强化（但没有喷射流）

我使用 "spatie/laravel-medialibrary": "^9.9" 来上传头像

$loggedUser = auth()->user();
$avatar_file_path = $avatarImageUploadedFile->getPathName();
$loggedUser->addMedia( $avatar_file_path )->toMediaCollection('avatar');

并且它有效，但是当我使用时，我可以通过哪种方式在客户端部分使用头像

this.$page.props.user

在 vue 组件属性中检查哪个用户已登录并显示他的信息？

谢谢！

Answer 1

您可以通过HandleInertiaRequests中间件使用“共享数据”功能来做到这一点。

例如，要共享用户信息，您可以执行以下操作：

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Storage;

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'user' => function () {
                return Auth::user() ? [
                    'id' => Auth::user()->id,
                    'name' => Auth::user()->name,
                    'email' => Auth::user()->email,  
                    // get path to avatar
                    'avatar' => Storage::url('avatar-of-the-user.jpg'),
                ] : null;
            },
        ]);
    }
}

在客户端，您可以使用this.$page.props.user.avatar 。