Vueuse useStorage 响应式存储

Vueuse useStorage 封装了原生的LocalStorage/SessionStorage方法实现响应式存储，我个人不建议用这个方法，可以直接用useLocalStorage和useSessionStorage,他俩用起来更简单。

代码示例

当与Nuxt 3一起使用时，这些函数将不会自动导入，而有利于Nitro的内置useStorage(),如果要使用VueUse中的函数，请使用显式导入。

import { useStorage } from '@vueuse/core'

// 绑定对象，绑定后对象具有响应式能力
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) // returns Ref<string>

// 删除本地存储
state.value = null

合并默认值

默认情况如果你写入的key已经存在本地存储中，useStorage是不会合并你新对到本地存储里面，而是以绑定存储对基准数据

import { useStorage } from '@vueuse/core';
//用原生方法写入数据
localStorage.setItem('key_user', '{"id":222}')
//用useStorage绑定对象
const userInfo = useStorage('key_user', { id: 1, url: 'https://www.itxst.com' },localStorage);

//输出结果为undefined,因为默认不会合并已存在的数据
console.log(userInfo.value.url);

设置mergeDefaults:true可以对已经存在数据进行浅合并

import { useStorage } from '@vueuse/core';
//用原生方法写入数据
localStorage.setItem('key_user', '{"id":222}')
//用useStorage绑定对象
const userInfo = useStorage('key_user', { id: 1, url: 'https://www.itxst.com' },localStorage,  { mergeDefaults: true });

//输出结果为 https://www.itxst.com,合并了已存在的数据
console.log(userInfo.value.url);

设置mergeDefaults:true是浅合并，你可以自定义函数进行深合并

import { useStorage } from '@vueuse/core';
//用原生方法写入数据
localStorage.setItem('key_user', '{"id":222}')
//用useStorage绑定对象
const userInfo = useStorage('key_user', 
{ id: 1, url: 'https://www.itxst.com' },
localStorage, 
{ mergeDefaults: (storageValue, defaults) => deepMerge(defaults, storageValue) });
 //deepMerge为你自定义的深度合并函数

自定义序列化

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无法推导数据类型，在这种情况下，您可以提供StorageSerializers对象类型告诉我们如何初始化。

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

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

const num = useStorage('key_user', null, undefined, { serializer: StorageSerializers.number })
num.value =100