如何使用Livewire和AlpineJS实现仅前端无缓存时才发起服务端请求

核心思路是把下拉变更的触发逻辑先交给Alpine做缓存判断，仅当缓存不存在时才调用Livewire发起服务端请求。 #

1. 定义Alpine状态容器 #

在你的表单外层添加Alpine的状态定义，用来存储已拉取的州数据缓存：

<div x-data="{
    cachedStates: {},
    currentStates: [],
    selectedCountry: ''
}">
<!-- 下面放你的国家、州下拉框 -->
</div>

2. 修改国家下拉框的触发逻辑 #

去掉原来的wire:change="fillStates"，改成Alpine的自定义事件处理，优先判断缓存：

<select 
    wire:model="selectedCountry" 
    name="selectedCountry" 
    id="selectedCountry"
    x-model="selectedCountry"
    @change="
        // 先判断缓存中是否存在对应国家的州数据，存在则直接使用
        if (selectedCountry && cachedStates[selectedCountry]) {
            currentStates = cachedStates[selectedCountry];
            return;
        }
        // 缓存不存在时才调用Livewire发起服务端请求
        if (selectedCountry) {
            $wire.call('fillStates').then(states => {
                cachedStates[selectedCountry] = states;
                currentStates = states;
            })
        } else {
            currentStates = [];
        }
    "
>
    <option value="">Select Country</option>
    @foreach($this->countries as $country)
        <option value="{{ $country->id }}">{{ $country->name }}</option>
    @endforeach
</select>

3. 调整州下拉框的渲染逻辑 #

直接使用Alpine中存储的currentStates渲染即可，不需要依赖Livewire的服务端属性渲染：

<select name="selectedState" id="selectedState">
    <option value="">Select State</option>
    <template x-for="state in currentStates" :key="state.id">
        <option :value="state.id" x-text="state.name"></option>
    </template>
</select>

4. （可选）Livewire端增加双重缓存判断 #

为了避免特殊场景下的重复数据库查询，可以给服务端的fillStates方法也加上本地缓存判断：

public function fillStates()
{
    // 先判断服务端已存储的states中是否已有对应数据，避免重复查库
    if (isset($this->states[$this->selectedCountry])) {
        return $this->states[$this->selectedCountry];
    }
    $states = State::where('country_id', $this->selectedCountry)->get();
    if(count($states)) {
        $this->states[$this->selectedCountry] = $states;
        return $this->states[$this->selectedCountry];
    }
    return [];
}

调整完成后，同一个国家第二次被选中时，会直接从Alpine的cachedStates中读取数据，不会发起任何Livewire请求。

内容的提问来源于stack exchange，提问作者kodfire