pinia中使用@vueuse/core库的useStorage做数据的持久化存储

useStorage(响应式本地/会话存储)

官网示例地址

参数说明

/**
 * @param {string} key  键名(必填)
 * @param {string | number | boolean | object | null} defaults: 默认值(必填)
 * @param { StorageLike(localStorage | sessionStorage) | undefined } storage 默认为localStorage
 * @param { UseStorageOptions } options 一些额外的配置及自定义序列化配置
 **/
function useStorage(
  key: string,
  defaults: MaybeComputedRef,
  storage: StorageLike | undefined,
  options: UseStorageOptions = {},
)
1
2
3
4
5
6
7
8
9
10
11
12

使用示例

import { useStorage } from '@vueuse/core'
// 1.设置
// 相当于 localStorage.setItem('my-store', 'hello')
// 参数个数为两个且键值相同时 多次调用useStorage无效只响应首次设置的值(函数内部会直接调用localStorage.getItem(key))
const state = useStorage('my-store', 'hello') // returns Ref
console.log(state.value) // hello
// const state = useStorage('my-store', { hello: 'hello' })
// const state = useStorage('my-store', true) // returns Ref
// const state = useStorage('my-store', 0) // returns Ref

// 2. 修改参数
state.value = '你好~' // 你好~

// 3. 清除storage 即 localStorage.removeItem(key)
state.value = null

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

useSessionStorage、useLocalStorage方法是基于useStorage,使用方式同useStorage。