聊一聊 vueuse 的 useStorage 方法

「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」

什么是vueuse和为什么要用vueuse?

VueUse 是一个基于Composition API(组合API)的实用函数集合。我前几天写了一篇有关vueuse的文章，具体讲解了vueuse的优点和用法，大家可以去看看：# vue3.0 + ts 引入 vueuse

什么是storage?

共有特性：

存储方式：键值对(key-value)的形式。

大小：每个域名5M。

1. localStorage：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

w3c文档：developer.mozilla.org/en-US/docs/…

2. sessionStorage:用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

w3c文档：developer.mozilla.org/en-US/docs/…

useStorage操作

localStorage操作

useLocalStorage方法文档：vueuse.org/core/useLoc…

localStorage操作

useSessionStorage方法文档：vueuse.org/core/useSes…

useStorage 方法

useStorage方法文档：vueuse.org/core/useSto…

1. 引入useStorage

import { useStorage } from '@vueuse/core'

2. 数据存储

• 存储字符串

const color = useStorage('my-color', 'red')

• 存储对象

const state = useStorage('my-store', { hello: 'hi', greeting: 'Hello' })

• 存储boolean

const flag = useStorage('my-flag', true) // returns Ref<boolean>

• 存储数字

const count = useStorage('my-count', 0) // returns Ref<number>

• 操作SessionStorage

const id = useStorage('my-id', 'some-string-id', sessionStorage) 

• 删除存储

state.value = null

3. 完整代码如下：

<script setup lang="ts">
import { stringify } from '@vueuse/docs-utils'
import { useStorage } from '.'
const state = useStorage('vue-use-local-storage', {
  name: 'Banana',
  color: 'Yellow',
  size: 'Medium',
})
const text = stringify(state.value)
</script>

<template>
  <div>
    <input v-model="state.name" type="text">
    <input v-model="state.color" type="text">
    <input v-model="state.size" type="text">

    <pre lang="json">{{ text }}</pre>
  </div>
</template>

4.效果如下图：

自定义序列化

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

import { useStorage } from '@vueuse/core'

useStorage(
  'key',
  {},
  undefined,
  { 
    serializer: {
      read: (v: any) => v ? JSON.parse(v) : null,
      write: (v: any) => JSON.stringify(v),
    }
  }
})

请注意，当您提供null默认值时，useStorage不能从中假设数据类型。在这种情况下，您可以提供自定义序列化程序或显式重用内置序列化程序。

import { useStorage, StorageSerializers } from '@vueuse/core'

const objectLike = useStorage('key', null, undefined, { 
    serializer: StorageSerializers.object 
})
objectLike.value = { foo: 'bar' }

缺点没加入数据监听

怎么实现监听缓存中指定key的值变化，代码如下：

window.addEventListener('storage', (e) => { 
    if(e.key && e.key == 'name' && e.newValue){ 
        this.socketQuery = e.newValue //即可获取到页面B最新的name 
    } 
})

总结

使用vueuse 的 useStorage 方法,我们可以更加高效，快速和直接的操作数据！简直不要太爽了！当然有了这个方法，我们也不能忘记了本来的操作方法。

相关文章

vue3.0 + ts 引入 vueuse