VueUse useStorage无法更新已存储对象值的问题咨询

我尝试更新localStorage中的对象属性，但当对象已存在于存储中时，useStorage无法更新该对象。

App.vue中的代码如下：

routeStore.query = {
  tab: 'products',
  subTab: 1,
  search: '',
  article: '',
}
console.log(routeStore.query)
console.log(localStorage.query)
useStorage('query', routeStore.query)
console.log(localStorage.query)

控制台输出内容：

Proxy(Object) {tab: 'products', subTab: 1, search: '', article: ''}
{"tab":"products","subTab":2,"search":"","article":""}
{"tab":"products","subTab":2,"search":"","article":""}

我的期望结果是query.subTab的值为1，请问我哪里操作错误？

问题出在useStorage的工作逻辑上——它的第二个参数是默认值，只有当localStorage中不存在对应key的数据时，才会用这个默认值初始化存储。你现在的写法是先修改routeStore.query，再调用useStorage，但因为localStorage.query已存在，所以useStorage不会用新的routeStore.query覆盖已有数据。

提供两种可行的解决方式：

方式1：通过useStorage返回的响应式对象修改 #

先获取绑定localStorage的响应式对象，直接修改其属性会自动同步到localStorage：

// 获取与localStorage绑定的响应式对象，若不存在则用routeStore.query初始化
const storedQuery = useStorage('query', routeStore.query)
// 修改属性，自动同步到localStorage
storedQuery.value.subTab = 1
// 将修改后的数据同步到store
routeStore.query = { ...storedQuery.value }

方式2：强制覆盖localStorage后同步 #

直接将新对象存入localStorage，再通过useStorage同步响应式状态：

routeStore.query = {
  tab: 'products',
  subTab: 1,
  search: '',
  article: '',
}
// 强制将新对象序列化后写入localStorage
localStorage.setItem('query', JSON.stringify(routeStore.query))
// 重新调用useStorage同步响应式状态
const storedQuery = useStorage('query', routeStore.query)

内容的提问来源于stack exchange，提问作者Artur Müller Romanov