Vue 3 の useStorage を使用して localStorage 機能を簡単に実装
VueUse の概要
VueUse ドキュメント:はじめに | VueUse
VueUse は、Vue3 の Comboposition API に基づいたユーティリティ関数のコレクションであり、useStorage
その 1 つです。useStorage
関数を実装するために使用できますlocalStorage
。
インストール
npm i @vueuse/core
CDN を使用する
<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>
useStorage()
の使用法
useStorage()
参照に使用するキーの名前を最初の引数として渡し、保存する値を 2 番目の引数として渡します。
値の保存、取得、削除
localStorage
setItem()
値の保存getItem()
、値の取得、removeItem
値の削除を設定するには次のようにします。
<script setup >
import {ref} from "vue";
const counter = ref('消息')
//保存值
localStorage.setItem('counter',counter.value)
//获取值
const data = localStorage.getItem('counter')
console.log('data',data)
//删除值
localStorage.removeItem('counter')
</script>
useStorage()
次のように、値の保存と取得に必要なのは 1 つだけです。
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
、初期値は空のオブジェクトで、ストレージに値が{}
ない場合はnull を返します。key
書き込み時に、オブジェクトを JSON 文字列にシリアル化します。