VueUse的useStorage存储的数据变化了，但页面没更新怎么办？

端木议谣提问于 2026-02-17 19:54:26 阅读 17

框架

在用VueUse的useStorage存表单数据时遇到个怪问题。我用v-model绑定了输入框，通过useStorage存到localStorage，但修改输入内容后页面显示没变，除非手动刷新。试过重新安装vueuse和检查依赖版本，还是不行。

代码大概是这样的：


<template>
  <input v-model="formData.name" />
</template>

<script setup>
import { useStorage } from '@vueuse/core'

const formData = useStorage('user-data', { name: '' })

预期是输入时实时更新并存储，但输入框内容改了之后，页面上的其他显示区域（比如{{ formData.name }}）不跟着变，必须刷新页面才能看到新值。这是哪里出问题了？

VueUse Vue生态组件开发

我来解答赞 2 收藏

反馈

1 条解答

Top丶诗雅 Lv1

这个问题其实挺常见的，主要是因为 useStorage 返回的是一个响应式引用（ref），但你在模板里用的时候可能没正确解包。Vue 的响应式系统需要你显式地处理 ref 的值。

具体来说，formData 是一个 ref 对象，而你直接在模板里用了 formData.name，这会导致 Vue 无法正确追踪 name 的变化。所以页面上的其他显示区域不会自动更新。

解决方法很简单，你可以通过 .value 来访问和修改 ref 的值，或者用 reactive 包一下让它更符合你的使用场景。我建议改一下代码：

<template>

  <input v-model="state.name" />

  <p>{{ state.name }}</p>

</template>



<script setup>

import { useStorage } from '@vueuse/core'

import { reactive } from 'vue'



// 用 reactive 包一下，方便直接使用

const formData = useStorage('user-data', { name: '' })

const state = reactive(formData.value)

</script>

这样改完之后，state 就是一个普通的响应式对象了，你在模板里可以直接用 state.name，输入框的值变化时，页面上的其他地方也会跟着实时更新。

还有一点需要注意，如果你确实想继续用 ref 的方式，也可以直接在模板里写成 formData.value.name，不过这种方式会显得有点啰嗦，我个人更推荐用 reactive 包一下。

最后吐槽一句，VueUse 的这些工具虽然好用，但有时候坑也不少，尤其是响应式这块，稍不注意就容易踩雷。希望这个改动能帮你解决问题。

2026-02-17 20:04