VueUse Local，轻松实现本地存储管理

在前端开发中,本地存储是一个常见且重要的功能，VueUse Local 为我们提供了便捷的方式来管理本地存储，VueUse Local 到底是什么？它有哪些优势？又该如何使用呢？下面我们将一一解答。

VueUse Local 是什么？

VueUse Local 是 VueUse 库中的一个模块，它封装了浏览器本地存储（如 localStorage 和 sessionStorage）的操作，使得在 Vue 项目中使用本地存储变得更加简单和方便。

VueUse Local 的优势

简化操作

传统的本地存储操作需要手动处理字符串的转换,而 VueUse Local 提供了更简洁的 API，我们可以直接使用 useLocalStorage 函数来创建一个响应式的本地存储变量。

import { useLocalStorage } from '@vueuse/core'
const count = useLocalStorage('count', 0)

这样,count 就是一个响应式的变量，它的值会自动与本地存储中的 count 键进行同步，当 count 的值发生变化时，本地存储也会自动更新；反之，当本地存储中的值发生变化时，count 也会自动更新。

支持多种存储类型

除了 localStorage，VueUse Local 还支持 sessionStorage，我们可以使用 useSessionStorage 函数来创建一个基于 sessionStorage 的响应式变量。

import { useSessionStorage } from '@vueuse/core'
const user = useSessionStorage('user', {})

这样,user 变量就会与 sessionStorage 中的 user 键进行同步。

类型安全

VueUse Local 支持 TypeScript，我们可以为存储的变量指定类型。

import { useLocalStorage } from '@vueuse/core'
interface User {
  name: string
  age: number
}
const user = useLocalStorage<User>('user', { name: '', age: 0 })

这样,在使用 user 变量时，就可以享受到 TypeScript 的类型检查和提示，提高代码的质量和可维护性。

如何使用 VueUse Local？

安装 VueUse

我们需要安装 VueUse 库，可以通过 npm 或 yarn 进行安装。

npm install @vueuse/core
# 或者
yarn add @vueuse/core

在 Vue 项目中使用

在 Vue 组件中，我们可以直接导入并使用 useLocalStorage 或 useSessionStorage 函数。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>
<script setup>
import { useLocalStorage } from '@vueuse/core'
const count = useLocalStorage('count', 0)
</script>

在上面的示例中,我们创建了一个简单的计数器组件。count 变量使用 useLocalStorage 函数创建，初始值为 0，当点击按钮时，count 的值会增加，并且这个变化会自动同步到本地存储中，即使刷新页面，count 的值也会保持不变。

高级用法

自定义存储键

我们可以通过传递第三个参数来指定存储的键。

const count = useLocalStorage('my - count', 0)

这样,count 变量就会与本地存储中的 my - count 键进行同步。

自定义存储序列化和反序列化

默认情况下,VueUse Local 使用 JSON.stringify 和 JSON.parse 进行存储值的序列化和反序列化，如果我们需要自定义序列化和反序列化方式，可以传递第四个参数。

const count = useLocalStorage('count', 0, {
  serializer: {
    read: (v) => parseInt(v),
    write: (v) => v.toString()
  }
})

在上面的示例中,我们自定义了 count 变量的序列化和反序列化方式，当读取本地存储中的值时，会将其转换为整数；当写入本地存储时，会将其转换为字符串。

监听存储变化

我们可以使用 watch 函数来监听存储变量的变化。

import { watch } from 'vue'
import { useLocalStorage } from '@vueuse/core'
const count = useLocalStorage('count', 0)
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`)
})

在上面的示例中,我们使用 watch 函数监听 count 变量的变化，当 count 的值发生变化时，会打印出变化前后的值。

VueUse Local 为我们提供了一种简单、方便、类型安全的方式来管理本地存储，它简化了本地存储的操作，支持多种存储类型，并且可以自定义存储的序列化和反序列化方式以及监听存储变化，通过使用 VueUse Local，我们可以更高效地开发 Vue 项目，提高代码的质量和可维护性，希望本文对您了解和使用 VueUse Local 有所帮助。