Vue组件中如何延迟VueUse useLocalStorage实例化至Prop填充完成？

核心问题在于useLocalStorage实例一旦创建，其绑定的localStorage键是固定的，无法直接修改。因此需要在eventId有效时重新创建存储实例，而非修改现有实例的键。

实现代码 #

<script setup>
import { ref, watch } from 'vue'
import { useLocalStorage } from '@vueuse/core'

const props = defineProps({
  eventId: {
    type: String,
    default: ''
  }
})

// 组件内使用的settings ref
const settings = ref({ theme: 'light', notifications: true })
// 保存当前的存储实例，用于清理旧关联
let activeStorage = null

watch(
  () => props.eventId,
  (newEventId, oldEventId) => {
    // 清理旧的存储实例关联
    if (activeStorage) {
      // 可选：如果不需要保留旧eventId的设置，删除旧键
      // localStorage.removeItem(oldEventId ? `user-settings-${oldEventId}` : '')
      activeStorage = null
    }

    if (!newEventId) {
      // eventId为空时，重置为默认值（不关联localStorage）
      settings.value = { theme: 'light', notifications: true }
      return
    }

    // 基于新eventId创建新的存储实例
    activeStorage = useLocalStorage(`user-settings-${newEventId}`, settings.value)
    // 同步存储实例的值到组件的settings
    settings.value = activeStorage.value

    // 监听存储实例的变化，实时同步到settings
    watch(activeStorage, (val) => {
      settings.value = val
    }, { deep: true })
  },
  { immediate: true } // 初始化时立即执行一次，避免空键问题
)
</script>

<template>
  <!-- 示例：绑定settings的值 -->
  <div>
    <label>
      深色模式：
      <input type="checkbox" v-model="settings.theme" :true-value="'dark'" :false-value="'light'">
    </label>
    <label>
      通知开关：
      <input type="checkbox" v-model="settings.notifications">
    </label>
  </div>
</template>

关键逻辑说明 #

1. 避免初始空键：通过immediate: true的watch，组件初始化时就会检查eventId是否有效，只有当eventId存在时才会创建useLocalStorage实例，杜绝空键生成。
2. 动态切换存储实例：每次eventId变化时，先清理旧的存储实例，再用新的eventId创建新实例，确保绑定的localStorage键完全对应当前eventId。
3. 值同步：将组件内的settings与新创建的存储实例绑定，保证UI操作能实时读写对应键的localStorage数据。

可选优化 #

• 如果需要保留所有eventId的历史设置，删除代码中localStorage.removeItem的注释即可。
• 可以将默认设置抽成常量，方便统一维护。

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