在Vue 3中使用useStorage轻松实现localStorage功能

╰半夏微凉° 2023-09-27 21:54 88阅读 0赞

## 在Vue 3中使用useStorage轻松实现localStorage功能 ##

### VueUse 介绍 ###

VueUse文档：[Get Started | VueUse][Get Started _ VueUse]

VueUse是基于Vue3的Composition API的实用函数的集合，`useStorage`是其中的一个函数。我们可以使用`useStorage`来实现我们的`localStorage`功能。

安装

npm i @vueuse/core

使用CDN

### `useStorage()`的用法 ###

`useStorage()`将要用于引用的键名作为第一个参数传递，将要保存的值作为第二个参数传递。

值的保存、获取、删除

`localStorage`设置`setItem()`来保存值，用`getItem()`来获取值，用`removeItem`来删除值如下：

而`useStorage()`只需要一个就可以进行值的保存和获取，如下，用法：

const storedValue = useStorage('key', value)

例子：

const msg = ref('你好')
       //保存值
       useStorage('msg',msg.value)
       //获取值
       const msgData = useStorage('msg')
       console.log('msgData',msgData.value)
       //删除
       const clear = () => {
         msg.value = null
       }

`useStorage()`自定义序列化

默认情况下，`useStorage`将根据提供的默认值的数据类型智能地使用相应的序列化程序。例如，`JSON.stringify/JSON.parse`将用于对象，`Number.toString/parseFloa`t用于数字等。 如下：

import { useStorage } from '@vueuse/core'
    
    useStorage(
      'key',
      {},
      undefined,
      {
        serializer: {
          read: (v: any) => v ? JSON.parse(v) : null,
          write: (v: any) => JSON.stringify(v),
        },
      },
    )

以上代码，我们设置对象的名称为`key`，初始值为空对象`{}`,如果存储中没有`key`的值，则返回null。在写入时，将对象序列化为JSON字符串。

[Get Started _ VueUse]: https://vueuse.org/guide/