如何将使用useTimeoutPoll的Toggle按钮状态保存至LocalStorage？

要实现Toggle按钮状态的持久化，你需要自己维护一个绑定LocalStorage的状态，同步控制useTimeoutPoll的启停，具体步骤和修改后的代码如下：

1. 替换原状态，使用持久化的ref变量 #

不再直接使用useTimeoutPoll返回的isActive，而是自己创建一个从LocalStorage读取初始值的ref：

// 从LocalStorage读取初始状态，默认设为false（可根据你的需求调整默认值）
const isPollActive = ref(localStorage.getItem('pollActive') === 'true')

const fetchData = async () => {
  await data.loadUpdate(id)
}

2. 初始化useTimeoutPoll并绑定状态监听 #

初始化轮询插件时，手动控制启停逻辑，同时监听状态变化同步到LocalStorage：

// 初始化轮询，禁止立即启动（如果插件支持immediate参数）
const { pause, resume } = useTimeoutPoll(fetchData, 10000, {
  immediate: false
})

// 监听状态变化，同步到LocalStorage并控制轮询启停
watch(isPollActive, (newValue) => {
  localStorage.setItem('pollActive', newValue.toString())
  newValue ? resume() : pause()
}, { immediate: true }) // 初始化时立即执行一次，确保状态同步

// 简化Toggle的点击逻辑
const toggleUpdate = () => {
  isPollActive.value = !isPollActive.value
}

如果你的useTimeoutPoll不支持immediate参数，可以先手动暂停，再执行监听：

const { pause, resume } = useTimeoutPoll(fetchData, 10000)
// 初始化先暂停，避免默认启动
pause()

watch(isPollActive, (newValue) => {
  localStorage.setItem('pollActive', newValue.toString())
  newValue ? resume() : pause()
}, { immediate: true })

3. 修改模板绑定 #

将Toggle的v-model绑定到我们自己维护的isPollActive：

<Toggle
  v-model="isPollActive"
  @click="toggleUpdate"
>
  <span>update</span>
</Toggle>

原理说明 #

• 页面加载时，isPollActive会从LocalStorage读取上次保存的状态，避免刷新后重置
• 每次Toggle切换时，状态变化会被watch捕获，自动同步到LocalStorage，并调用resume/pause控制轮询
• 简化后的toggleUpdate直接切换状态，逻辑更清晰

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