hihaho/laravel-js-store

Laravel JS Store - 将数据轻松渲染到您的 blade 模板中,以用于前端,例如 Vue

4.0.0 2024-03-25 16:27 UTC

This package is auto-updated.

Last update: 2024-09-25 21:12:16 UTC


README

Latest Version on Packagist Build Status Quality Score Total Downloads

轻松将数据传递给您的视图以创建前端初始状态。此包允许您轻松创建和注册全局数据提供者(每个页面),例如用户数据很有用。您还可以在控制器中手动推送数据。

安装

您可以通过 composer 安装此包

composer require hihaho/laravel-js-store:^4.0

接下来,您应在页面上渲染 js 数据,有几种不同的方法可以实现

Blade 指令

@frontend_store 指令添加到您的视图中

<html>
    <head>
        
    </head>
    <body>
        @frontend_store
    </body>
</html>

覆盖默认视图

使用 php artisan vendor:publish --tag=laravel-js-store-views 发布当前视图或创建一个新视图:resources/views/vendor/js-store/script.blade.php

以您想要的方式输出数据,然后使用 blade 指令(@frontend_store)包含它。

用法

有两种方法可以将数据推送到 store,通过数据提供者或手动推送。

手动推送

在任何应用点,您都可以使用助手、外观或通过 Laravel 容器将数据推送到 store。

您可以推送几乎任何类型的数据,只要它可以被转换为字符串。

// Using the helper
frontend_store()->put('user', Auth::user());

// Using the facade
\HiHaHo\LaravelJsStore\StoreFacade::put('user', Auth::user());

// Using the laravel container
app()->make(\HiHaHo\LaravelJsStore\Store::class)->put('user', Auth::user());
app()->make('js-store')->put('user', Auth::user());

// Using the view or response macro
class Controller
{
    public function index()
    {
        return view('index')
            ->js('foo', 'bar');
    }

    public function create()
    {
        return response()
            ->view('create')
            ->js([
                'foo' => 'Fred',
                'bar' => 'Waldo',
            ]);
    }
}

数据提供者

数据提供者是类,可以用于全局定义应发送到前端的数据。这也是存储与数据相关的更多逻辑或定义数据需要渲染的规则的便捷方式。

数据提供者在您的配置中定义,因此您首先需要发布配置文件。

php artisan vendor:publish --tag=laravel-js-store-config

这将创建 config/js-store.php

使用 artisan make 命令创建数据提供者

php artisan make:frontend-data-provider SomeName

这将创建一个继承自 HiHaHo\LaravelJsStore\AbstractFrontendDataProvider 的数据提供者。

数据提供者的一个示例可能如下所示

<?php

namespace App\Http\FrontendDataProviders;

use HiHaHo\LaravelJsStore\AbstractFrontendDataProvider;

class User extends AbstractFrontendDataProvider
{
    /**
     * The data that will be JSON encoded
     *
     * @return mixed
     */
    public function data()
    {
        return Auth::user();
    }
    
    public function hasData(): bool
    {
        // Only push the data when the user is signed in
        return Auth::check();
    }
}

接下来,在 config/js-store.php 中注册您的数据提供者

'data-providers' => [
    \App\Http\FrontendDataProviders\User::class,
],

您的数据现在将自动渲染在 blade 视图中(在这种情况下,仅当用户登录时)。

与 Laravel Octane 一起使用

此包注册了一个单例来管理发送到 JS Store 的所有数据。Laravel Octane 将在每个请求中注册一个实例,但仅在单例未在服务提供程序内部访问时。因此,您无法在服务提供程序内推送数据到 store。

通常,不需要在请求之间刷新所有数据,但如果您需要这种行为,可以在请求之间刷新数据。在服务提供程序内部推送的数据在请求中不可用。要刷新请求之间的数据,您应在 config/octane.php 中将 PrepareStoreForNextOperation::class 监听器添加到以下 Octane 事件

  • RequestReceived::class
  • TaskReceived::clas
  • TickReceived::class
use HiHaHo\LaravelJsStore\Octane\PrepareStoreForNextOperation;

return [
    // ...

    'listeners' => [
        RequestReceived::class => [
            // ...
            PrepareStoreForNextOperation::class,
        ],
        TaskReceived::class => [
            // ...
            PrepareStoreForNextOperation::class,
        ],
        TickReceived::class => [
            // ...
            PrepareStoreForNextOperation::class,
        ],
    ]
];

Testing

composer test

变更日志

请参阅 CHANGELOG 了解最近更改的更多信息。

贡献

请参阅 CONTRIBUTING 了解详细信息。

致谢

许可

MIT 许可证 (MIT)。有关更多信息,请参阅 许可文件

Laravel 包模板

此包使用Laravel Package Boilerplate生成。