useStorage 是 VueUse 库中的一个组合式函数，用于与浏览器的 localStorage 或 sessionStorage 进行交互。它可以帮助你在 Vue 3 中更方便地管理和操作存储数据。

假设你想在 localStorage 中存储用户的主题偏好设置（例如，是浅色模式还是深色模式），你可以这样做：

1. 1、引入 useStorage： 在你的 Vue 组件中引入 useStorage。

2. 2、使用 useStorage： 创建一个响应式的变量，并将其绑定到 localStorage 中的一个键上。

<template>
  <div :class="{ 'dark-mode': isDarkMode }">
    <button @click="toggleTheme">切换主题</button>
    <p>当前主题: {{ isDarkMode ? '暗色模式' : '浅色模式' }}</p>
  </div>
</template>

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

// 使用 useStorage 创建一个响应式的变量 isDarkMode
const isDarkMode = useStorage('user-theme', false) // 默认值为 false，表示默认为浅色模式

// 切换主题的方法
const toggleTheme = () => {
  isDarkMode.value = !isDarkMode.value
}
</script>

<style>
.dark-mode {
  background-color: #333;
  color: white;
}
</style>

• useStorage('user-theme', false):

  • 第一个参数 'user-theme' 是存储在 localStorage 中的键名。
  • 第二个参数 false 是默认值。如果 localStorage 中没有这个键，那么 isDarkMode 的初始值将被设置为 false。

• isDarkMode:

  • 这是一个响应式的 Ref 对象。它的值会自动同步到 localStorage 中。
  • 你可以在模板中直接使用 isDarkMode，并且它的值会在用户点击按钮时自动更新并保存到 localStorage 中。

• toggleTheme 方法:

  • 这个方法用于切换 isDarkMode 的值。每次点击按钮时，isDarkMode 的值会被取反，并且新的值会自动保存到 localStorage 中。

通过这种方式，你可以轻松地在 Vue 3 项目中管理用户的本地存储数据，并保持数据的一致性和响应性。