Livewire与Alpine.js协同优化：实现前端按需加载与数据缓存

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Country; // 假设您有Country模型
use App\Models\State;   // 假设您有State模型

class CountryStateDropdown extends Component
{
    public $countries; // 用于初始化国家下拉框的所有国家
    public $selectedCountry; // 绑定到选中的国家ID
    public $currentStatesForAlpine = []; // 此属性将存储当前选中国家的州/省数据，供Alpine.js读取

    /**
     * 组件初始化时加载所有国家
     */
    public function mount()
    {
        $this->countries = Country::all();
    }

    /**
     * 根据选中的国家ID获取州/省数据
     * 此方法仅在Alpine.js判断数据未缓存时调用
     */
    public function fillStates()
    {
        if ($this->selectedCountry) {
            $states = State::where('country_id', $this->selectedCountry)->get();
            // 将查询结果转换为数组，以便Alpine.js更容易处理
            $this->currentStatesForAlpine = $states->toArray();
        } else {
            $this->currentStatesForAlpine = [];
        }
    }

    /**
     * 渲染视图
     */
    public function render()
    {
        return view('livewire.country-state-dropdown');
    }
}

<div x-data="{
    selectedCountry: @entangle('selectedCountry'), // 将Alpine的selectedCountry与Livewire的绑定
    statesCache: {}, // Alpine.js的本地缓存，用于存储已获取的州/省数据
    // 假设您还需要一个变量来存储当前显示的州/省列表
    displayedStates: [],
}"
x-init="$watch('selectedCountry', async (value) => {
    // 当selectedCountry变化时触发
    if (value) { // 确保有国家被选中
        if (! (value in statesCache)) {
            // 如果当前国家的州/省数据不在缓存中，则通过Livewire获取
            await @this.call('fillStates'); // 调用Livewire方法
            // Livewire方法执行完毕后，从Livewire组件获取更新后的数据并存入缓存
            statesCache[value] = @this.get('currentStatesForAlpine');
        }
        // 更新当前显示的州/省列表
        displayedStates = statesCache[value];
    } else {
        // 如果没有国家被选中，清空显示的州/省列表
        displayedStates = [];
    }
})"
>
    <!-- 国家选择下拉框 -->
    <label for="selectedCountry" class="block text-sm font-medium text-gray-700">国家:</label>
    <select x-model="selectedCountry" name="selectedCountry" id="selectedCountry" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
        <option value="">请选择国家</option>
        @foreach($countries as $country)
            <option value="{{ $country->id }}">{{ $country->name }}</option>
        @endforeach
    </select>

    <!-- 州/省选择下拉框，根据displayedStates动态渲染 -->
    <template x-if="selectedCountry">
        <div class="mt-4">
            <label for="selectedState" class="block text-sm font-medium text-gray-700">州/省:</label>
            <select name="selectedState" id="selectedState" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                <option value="">请选择州/省</option>
                <template x-for="state in displayedStates" :key="state.id">
                    <option :value="state.id" x-text="state.name"></option>
                </template>
            </select>
        </div>
    </template>
</div>