@composy/storage-vue

@composy/storage-vue

@composy/storage-vue 为 @composy/storage-core 提供 Vue 侧接入能力。

能力范围

• 原生 Vue plugin：createStoragePlugin
• @composy/engine-core plugin：createStorageEnginePlugin
• composables
  • useStorage
  • useLocalStorage
  • useSessionStorage
  • useCookie
  • useIndexedDB

设计约束

• 原生 Vue plugin 和 engine plugin 共用同一个 runtime 安装链。
• composable 默认优先复用已注入的 StorageManager；没有注入时再退回到对应介质的共享 manager。
• useIndexedDB 在普通 Ref<T> 基础上额外提供 ready()，方便等待异步初始化。

配置与构建

• ESLint 与 TypeScript 权威配置为 .ldesign/eslint.config.js、.ldesign/tsconfig.json 和 .ldesign/tsconfig.typecheck.json。
• 打包使用 .ldesign/builder.config.ts 中的 @composy/builder / rolldown 配置。
• tsconfig.json 与 tsconfig.typecheck.json 保留为兼容 shim；pnpm run type-check 直接使用 .ldesign/tsconfig.typecheck.json。

原生 Vue plugin

import { createStoragePlugin } from '@composy/storage-vue'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(
  createStoragePlugin({
    prefix: 'demo',
    defaultTTL: 60_000,
  })
)

app.mount('#app')

安装后会提供：

• provide(STORAGE_MANAGER_SYMBOL, manager)
• provide('storage', manager)
• provide('storageManager', manager)
• provide('ldesign-storage', manager)
• app.config.globalProperties.$storage

engine plugin

import { createStorageEnginePlugin } from '@composy/storage-vue'

engine.use(
  createStorageEnginePlugin({
    name: 'storage',
    prefix: 'demo',
  })
)

当 engine 已经创建 Vue app 时，plugin 会把 runtime 安装到 app 并同步写入 engine state；如果 app 尚未创建，会等待 app:created 后再完成绑定。

composables

useStorage

import { LocalStorageAdapter } from '@composy/storage-core'
import { useStorage } from '@composy/storage-vue'

const state = useStorage('draft', '', new LocalStorageAdapter(), {
  prefix: 'demo',
  ttl: 10_000,
  syncTabs: true,
})

console.info(state.value)

useLocalStorage

const username = useLocalStorage('username', 'guest', {
  prefix: 'demo',
  syncTabs: true,
})

console.info(username.value)

useCookie

const token = useCookie('token', '', {
  path: '/',
  secure: true,
  sameSite: 'lax',
})

console.info(token.value)

useIndexedDB

const history = useIndexedDB('history', [], {
  prefix: 'demo',
  databaseName: 'demo-storage',
})

await history.ready()

同步规则

• 同一应用内的多处读写，统一通过 StorageManager 事件保持同步。
• syncTabs: true 当前只对能拿到浏览器原生 Storage 实例的适配器生效，也就是 localStorage / sessionStorage。
• cookie 和 indexedDB 目前不会额外创建跨标签页广播通道。