Pinia结合VueUse：useLocalStorage与useSessionStorage混合方案需求

我用Pinia结合VueUse的useLocalStorage实现了按钮布尔状态的绑定，简化代码如下：

import { defineStore } from 'pinia'
import { useLocalStorage } from "@vueuse/core"

export const useDemoStore = defineStore('DemoStore', { 
   state: () => ({
      showWords: useLocalStorage('showWords', true)
   }),
   actions: {
       toggleButton(name) {
           let newValue = !this[name]
           this[name] = newValue
       }
       // 其他action...
    }
})

这个实现能跨会话缓存UI状态，但多标签页/窗口会全局同步状态，不符合需求。我需要：

• 各标签页状态独立
• 当前状态作为默认值持久化到未来会话（最后修改的值作为下次打开的默认值）

改用useSessionStorage能解决多标签页同步问题，但无法跨会话保存状态。我需要的是混合方案：状态仅限当前会话独立，但默认值存在LocalStorage中。

举个例子：类似VueUse的useStorage示例中，修改值后所有标签页同步，但我希望这个值能作为未来会话的默认值，同时当前标签页的状态不受其他标签页修改影响。

想知道是否能通过Pinia现有功能或VueUse现有函数实现这种内置/简便的方案？

可以通过结合useLocalStorage和useSessionStorage，配合Pinia的状态初始化逻辑来实现需求，无需额外自定义复杂存储逻辑，用VueUse和Pinia的现有功能就能搞定：

实现思路 #

1. 初始化时，从localStorage读取历史最后保存的值，作为当前会话sessionStorage的初始值
2. 当前会话内的状态修改仅存在sessionStorage中，保证各标签页独立
3. 每次修改状态时，同步更新localStorage，让这个值成为未来会话的默认值

代码实现 #

import { defineStore } from 'pinia'
import { useLocalStorage, useSessionStorage } from "@vueuse/core"

export const useDemoStore = defineStore('DemoStore', { 
   state: () => ({
      // 从localStorage取历史值作为sessionStorage的初始值，无则用默认true
      showWords: useSessionStorage('showWords-session', useLocalStorage('showWords', true).value)
   }),
   actions: {
       toggleButton(name) {
           this[name] = !this[name]
           // 同步更新localStorage，保存当前值作为未来会话的默认值
           useLocalStorage('showWords').value = this[name]
       }
       // 其他action同理，修改状态后同步更新localStorage
    }
})

逻辑说明 #

• useSessionStorage('showWords-session', ...)：当前会话内的状态存在sessionStorage，各标签页独立，不会互相影响
• 初始化时用useLocalStorage('showWords', true).value作为sessionStorage的初始值，保证打开新会话时用上一次最后修改的值
• 每次修改状态后，主动把当前值写入localStorage，确保下次打开页面时能读取到最新的默认值

另外，也可以用VueUse的useStorage配合自定义存储适配器，但上面的方案更直接，利用现有API就能实现需求，不需要额外封装。

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