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>

public function fillStates()
{
    $states = State::where('country_id', $this->selectedCountry)->get();
    if(count($states)) {
        // 将数据存储在Livewire组件的公共属性中
        $this->states[$this->selectedCountry] = $states; 
        return $this->states[$this->selectedCountry];
    }
    return [];
}

<div x-data="{
    selectedCountry: null, // 当前选中的国家ID
    // 用于缓存已加载州数据的对象，键为国家ID，值为对应的州数组
    cachedStates: {}, 
}"
x-init="$watch('selectedCountry', (value) => {
    // 只有当selectedCountry有值且该国家的数据不在缓存中时才触发Livewire请求
    if (value && ! (value in cachedStates)) {
        // 调用Livewire组件的fillStates方法
        @this.call('fillStates').then(() => {
            // Livewire方法执行后，从Livewire组件获取states属性并缓存
            cachedStates[value] = @this.get('states')[value];
        });
    }
})"
>
    <select x-model="selectedCountry" name="selectedCountry" id="selectedCountry">
        <option value="">Select Country</option>
        @foreach($this->countries as $country)
            <option value="{{ $country->id }}">{{ $country->name }}</option>
        @endforeach
    </select>

    <!-- 示例：显示当前选中国家对应的州 -->
    <template x-if="selectedCountry && cachedStates[selectedCountry]">
        <div>
            <h3>States for <span x-text="selectedCountry"></span>:</h3>
            <ul>
                <template x-for="state in cachedStates[selectedCountry]" :key="state.id">
                    <li x-text="state.name"></li>
                </template>
            </ul>
        </div>
    </template>
</div>

// 在Livewire组件中定义 $states 属性
public $states = [];
public $selectedCountry; // 确保这个属性也存在

public function fillStates()
{
    // 只有当$this->selectedCountry有值且当前国家的州数据尚未加载时才执行数据库查询
    // 尽管Alpine.js已经做了判断，Livewire内部也可以增加一层防御性检查
    if ($this->selectedCountry && !isset($this->states[$this->selectedCountry])) {
        $states = State::where('country_id', $this->selectedCountry)->get();
        if(count($states)) {
            $this->states[$this->selectedCountry] = $states;
        } else {
            $this->states[$this->selectedCountry] = []; // 确保即使没有数据也初始化为空数组
        }
    }
    // Livewire会自动将公共属性（如$states）同步到前端
}