Laravel Livewire Volt是一个LiveWire软件包，允许开发人员使用模板和PHP逻辑在刀片文件中创建LiveWire组件。
如果您熟悉创建VUE，React或Svelte组件，您知道可以在一个组件文件中定义模板和逻辑零件。
逻辑决定了组件的行为，并允许开发人员管理用户交互。例如，您可以创建一个交互式组件，允许最终用户执行通过交互触发的逻辑，例如单击按钮。

这个想法

要探索Volt功能，我们将创建一个新的Laravel应用程序，安装LiveWire，安装和配置LiveWire Volt并创建我们的第一个组件。

我们要创建的组件是一个允许我们模拟滚动骰子的组件。单击一个按钮，将生成1至6之间的数字。前端将根据新绘制的值自动更新。

这是一个超级简单的组件，但是它允许我们探索如何管理伏特状态，触发逻辑（在PHP中实现）并更新前端部分。

让我们创建Laravel Livewire项目

因此，首先，创建您的Laravel应用程序，并添加LiveWire和LiveWire Volt。我们将安装Beta版本，因为Laravel Livewire 3和Laravel Livewire Volt 1仍然需要以稳定的方式发布。

laravel new roll-the-dice-volt
cd roll-the-dice-volt
composer require livewire/livewire:^3.0@beta
composer require livewire/volt:^1.0@beta

现在您安装了所需的软件包，您可以安装所需的文件以适当使用Volt。

php artisan volt:install

volt:install命令将安装伏特设置的ServiceProvider文件。

创建伏特组件

ServiceProvider发行了默认配置，用于从Directories resources/views/livewire和resources/views/pages加载LiveWire组件。但是我们掌握了好的，因为如果您想创建一个新组件，则可以使用make:volt Artisan命令。

如果要创建rollthedice组件，则可以启动以下内容：

php artisan make:volt RollTheDice

make:volt命令降低了文件的名称的案例，并在正确的位置创建文件：resources/views/livewire/rollthedice.blade.php。

在主页上加载组件

我们创建了rollthedice组件后，我们可以将其包含在您的页面中。例如，新创建的Laravel项目的默认页面是resources/views/welcome.blade.php文件。因此，在该文件中，我们可以使用LiveWire标签包括LiveWire组件：

<livewire:rollthedice />

实现组件

现在我们可以专注于组件实现。
逻辑很容易，我们想使用两个变量状态：

• dice：用于存储当前值（每当最终用户单击滚动骰子的按钮时，由random_int()函数生成；
• rolls：存储所有绘制值，因为最终用户可以不止一次滚动骰子。

和演示目的，我们要管理第三个变量，一个名为total的计算变量。计算变量是每次调用函数时“计算”的变量。因此，在这个简单的示例中，我们想更新绘制值的总数。

组件的代码为：

<?php

// 001 importing the computed and state functions
use function Livewire\Volt\computed;
use function Livewire\Volt\state;

// 002 setting the 'dice' integer state as 0
state(['dice' => 0]);
// 003 setting the 'rolls' array state as an empty array
state(['rolls' => []]);
// 004 defining the `roll` function for generating a random number
$roll = function () {
    $this->dice = random_int(1, 6);
    $this->rolls[] = $this->dice;
};
// 005 defining the `restart` function for resetting the state values
$restart = function () {
    $this->dice = 0;
    $this->rolls = [];
};
// 006 defining the computed `total` function for calculating the sum of values
$total =
    computed(function () {
        return array_sum($this->rolls);
    });
?>
<div class="max-w-7xl  text-center">
    <div class="stats shadow">
        <div class="stat">
            <div class="stat-title">Number</div>
            <div class="stat-value">{{ $dice }}</div>
            <div class="stat-desc">Drawed number</div>
        </div>
        <div class="stat">
            <div class="stat-title">Number of rolls</div>
            <div class="stat-value">{{ sizeof($rolls) }}</div>
            <div class="stat-desc">Number of times the dice were rolled</div>
        </div>
        <div class="stat">
            <div class="stat-title">Total</div>
            <div class="stat-value">{{ $this->total }}</div>
            <div class="stat-desc">Sum of all numbers drawn</div>
        </div>
    </div>
    <div class="p-5 text-center">
        <button class="btn btn-primary mx-5" wire:click="roll">Let's roll the dice</button>
        <button class="btn btn-secondary mx-5" wire:click="restart">Restart</button>
    </div>
    <div class="p-1 text-center w-128 ">
        All the rolls :
        @foreach ($rolls as $roll)
            {{ $roll }} /
        @endforeach
    </div>
</div>

文件组件（刀片文件）由两个部分组成。

第一部分是逻辑，我们在其中声明状态，定义了计算函数，并实现了几个匿名函数，我们将通过单击“按钮”按钮触发。

刀片文件的第二部分是呈现组件所需的HTML的模板。

在代码中，我添加了一些占位符评论。让我们浏览相关部分：

• 001：导入computed和state函数;
• 002：设置dice状态以存储当前值;
• 003：设置rolls状态以存储值;
• 004：定义用于生成随机数并在rolls数组中添加值的roll函数;
• 005：定义restart函数以重置dice状态值并重新定位rolls111111
• 006：定义计算的total函数以计算值的总和

有关计算功能的注释

一个计算的函数是执行一次的函数，然后将值缓存。在此示例中，计算的函数可能没有任何意义，因为在引擎盖下，我们调用了array_sum()函数（快速和内存功能，无延迟）。但是，如果逻辑涉及数据库查询或API调用（某些具有潜在延迟的操作）怎么办？
您可以使用在这种情况下缓存结果的计算功能来评估。但是，请记住，LiveWire仅缓存在单个组件请求期间的结果。有关LiveWire中计算功能的更多信息3：https://livewire.laravel.com/docs/computed-properties。

因此，再次，在此示例中，我们使用计算的函数来演示如何声明计算函数以及如何调用计算函数。

关于“如何调用”计算函数的注释：要访问计算函数的值，您需要使用$this->语法访问$this对象。

我对LiveWire Volt组件的想法

此示例对于了解LiveWire Volt组件如何工作以及如何实现新的示例很有用。
但是，对于此特定用例，我会诚实地对您说实话，在此情况下，逻辑只能在前端执行，最好选择一个简单的JavaScript代码或使用Svelte，Vue或React。

所以，当使用Volt组件方法时，它可能有用吗？
当然，当您需要实现的逻辑时需要一些服务器端执行，因为（例如）您需要访问数据库，或者需要使用一些秘密令牌等访问API等。

这是因为您声明的功能在服务器端执行。如果您检查网络上的流量，每次调用roll()函数或调用reset()函数时，您都会看到一个LiveWire HTTP调用。
因此，使用这种方法，您可以引入延迟，因此，如果逻辑是纯粹的前端逻辑。
，您将没有真正的好处。
处理服务器端可执行业务逻辑时，情况有所不同。
而你，你怎么看？请随时在评论中回复或给出任何反馈。我对您的意见感到好奇。