使用AlpineJS Persist实现带默认选项的本地存储下拉菜单

核心处理逻辑 #

• 换掉原生localStorage，用AlpineJS自带的x-persist插件管理本地存储，省去手动读写的麻烦
• 给选中值加兜底判断，首次加载未选择状态时显示默认文本

完整代码实现 #

<div x-data="{ 
    selectedDestination: $persist(''),
    destinations: ['Paris', 'Rome'],
    get displayText() {
        return this.selectedDestination || 'Add Destination'
    },
    open: false
}" class="dropdown">
    <!-- 下拉触发按钮 -->
    <button @click="open = !open" x-text="displayText" class="dropdown-button"></button>
    
    <!-- 下拉选项列表 -->
    <div x-show="open" @click.outside="open = false" class="dropdown-menu">
        <template x-for="dest in destinations" :key="dest">
            <div @click="selectedDestination = dest; open = false" x-text="dest" class="dropdown-item"></div>
        </template>
    </div>
</div>

关键细节说明 #

• $persist的用法：直接在selectedDestination变量后追加$persist('')，AlpineJS会自动完成本地存储的读写操作，不用再写localStorage.getItem/setItem这类原生代码
• 默认文本兜底逻辑：通过计算属性displayText判断，当selectedDestination为空（首次进入页面或未选择选项时），显示“Add Destination”；有选中值时则显示对应的目的地
• 下拉交互保留：原有的下拉展开/收起、点击选项关闭菜单的逻辑不变，点击选项时更新selectedDestination即可，$persist会自动同步到本地存储

必要的插件引入 #

• 模块引入方式：

  import Alpine from 'alpinejs'
  import persist from '@alpinejs/persist'
  
  Alpine.plugin(persist)
  Alpine.start()
  

• CDN引入方式：

  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <script defer src="https://unpkg.com/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
  

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