ifnot/vue-data-sync

dev-master 2020-01-09 17:15 UTC

This package is auto-updated.

Last update: 2024-09-11 19:01:14 UTC


README

在VueJS和Laravel Eloquent模型之间进行实时模型同步。

此包允许您通过Laravel Echo将Eloquent事件(创建、更新和删除)发送到您的VueJs应用程序,以保持所有客户端数据与您的Laravel后端同步。

此包旨在实现无需对后端和前端进行深度更改的轻松集成。

先决条件

您应该有一个运行中的Echo安装。请遵循官方安装步骤

安装

composer require ifnot/vue-data-sync

由于这是一个WIP,您可能需要在您的composer.json中降低稳定性选项

"minimum-stability": "dev",
"prefer-stable": true

然后将服务提供者添加到您的config/app.php中,在您的应用程序服务提供者之前(重要)

Ifnot\VueDataSync\Providers\VueDataSyncServiceProvider::class

快速入门

AppServiceProvider中监听Eloquent模型的修改

use Ifnot\VueDataSync\VueData;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        VueData::sync([
            App\Car::class
        ]);
    }
}

现在,您可以设置客户端(VueJs)

微调

$synchronizer类引用到模型属性中以重载默认行为

class Car extends Model
{
    public $synchronizer = CarSynchronizer::class;
    
    // [...]
}

class CarSynchronizer extends Ifnot\VueDataSync\Vuex\ModelSynchronizer
{
    /**
     * Return the related models witch should be updated when this model
     * is updated / deleted
     */
    public function getCascadeRelations(): array
    
    /**
     * Return the frontend name of the model (VueJS side)
     */
    public function getName(): string
    
    /**
     * Return the channels names to be broadcasted, if false or empty, no
     * message will be sent.
     */
    public function getChannels()
    
    /**
     * Transform the model object to array in order to be serialized on the
     * broadcast event.
     */
    public function toArray(Model $model): array
    
    /*
     * Return the meta to be broadcasted with the message
     */
    public function getMeta()
    
    /*
     * Handle the event emitting
     */
    public function emit(string $event, array $meta = [])
}

通过查看ModelSynchronizer来引用默认行为