useAppStorage

<script setup lang="ts">
import { useAppStorage } from '@movk/core'
import { z } from 'zod'

// 1. 定义数据的 Zod schema
const userPrefsSchema = z.object({
  theme: z.enum(['light', 'dark']).default('light'),
  language: z.string().default('en'),
  notifications: z.object({
    email: z.boolean().default(true),
    push: z.boolean().default(false)
  })
})

// 2. 创建一个响应式的、经过验证的存储实例
const { state, setItem, getItem, removeItem } = useAppStorage({
  key: 'user-preferences',
  defaultValue: {
    theme: 'light',
    language: 'en',
    notifications: {
      email: true,
      push: false
    }
  },
  schema: userPrefsSchema,
  storage: 'localStorage', // or 'sessionStorage'
  prefix: 'my-app'
})

// 3. 在模板或脚本中直接使用响应式状态
console.log(state.value.theme) // 'light'

// 4. 安全地更新数据（会自动进行验证）
function toggleTheme() {
  setItem({
    ...state.value,
    theme: state.value.theme === 'light' ? 'dark' : 'light'
  })
}

// 5. 尝试设置无效数据将被阻止
function setInvalidData() {
  setItem({
    ...state.value,
    theme: 'system' // 'system' is not in the enum, so this update will be ignored.
  })
  console.log(state.value.theme) // 仍然是 'dark' 或 'light'
}
</script>

<template>
  <div>
    <p>当前主题: {{ state.theme }}</p>
    <button @click="toggleTheme">
      切换主题
    </button>
    <button @click="setInvalidData">
      设置无效主题
    </button>
  </div>
</template>