优化 Livewire/Alpine.js 数据加载：实现客户端条件缓存

<select wire:model="selectedCountry" name="selectedCountry" id="selectedCountry" wire:change="fillStates">
    <option value="">Select Country</option>
    @foreach($this->countries as $country)
        <option value="{{ $country->id }}">{{ $country->name }}</option>
    @endforeach
</select>

// Livewire Component
public $selectedCountry;
public $states = []; // 用于存储已获取的州/省数据

public function fillStates()
{
    // 每次选择都会触发此方法，并查询数据库
    $fetchedStates = State::where('country_id', $this->selectedCountry)->get();
    if($fetchedStates->count()) {
        $this->states[$this->selectedCountry] = $fetchedStates;
    } else {
        $this->states[$this->selectedCountry] = collect(); // 确保即使无数据也有空集合
    }
}

// app/Http/Livewire/CountryStateDropdown.php
namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Country;
use App\Models\State;

class CountryStateDropdown extends Component
{
    public $countries;
    public $selectedCountry;
    public $states = []; // 公共属性，用于在 Livewire 内部缓存已获取的州/省数据

    public function mount()
    {
        $this->countries = Country::all();
    }

    /**
     * 根据选定的国家ID获取州/省数据。
     * 此方法仅在 Alpine.js 判断客户端无缓存时被调用。
     */
    public function fillStates()
    {
        // 只有当 Livewire 内部也未缓存此国家数据时，才进行数据库查询
        if (!isset($this->states[$this->selectedCountry])) {
            $fetchedStates = State::where('country_id', $this->selectedCountry)->get();
            $this->states[$this->selectedCountry] = $fetchedStates;
        }
        // 注意：此方法不再需要显式返回数据，因为 Alpine.js 将直接通过 @this.get('states') 访问 $this->states 属性。
    }

    public function render()
    {
        return view('livewire.country-state-dropdown');
    }
}

<!-- resources/views/livewire/country-state-dropdown.blade.php -->
<div x-data="{
    selectedCountry: @entangle('selectedCountry'), // 将 Alpine.js 的 selectedCountry 与 Livewire 属性同步
    cachedStates: {}, // 客户端缓存对象，结构为 { country_id: [state_objects] }
}"
x-init="$watch('selectedCountry', async (value) => {
    if (value) { // 确保有实际的国家被选中
        // 检查当前选中的国家的数据是否已存在于 Alpine.js 的 cachedStates 缓存中
        if (! (value in cachedStates)) {
            // 如果不在缓存中，则调用 Livewire 方法从服务器获取数据
            await @this.call('fillStates');

            // 从 Livewire 组件的公共 $states 属性中获取特定国家的数据，并存储到 Alpine.js 的 cachedStates 中
            // @this.get('states') 返回的是 Livewire 组件的整个 $states 数组
            // 因此我们需要通过 [value] 索引来获取特定国家的数据
            cachedStates[value] = @this.get('states')[value];
        }
        // 如果数据已在缓存中，则不执行 @this.call()，直接使用 cachedStates[value]
    } else {
        // 如果没有选中任何国家，可以清空或重置相关状态
        // 例如：selectedState = null;
    }