VueUseを使って、快適にLocalStorage管理を実現しよう

Vueユーザーのみなさま。
VueUseという便利なライブラリはご存知ですか〜？

https://vueuse.org/

こちら「lodashのVue版」みたいな、便利なライブラリなのですが、今回はその中から「useLocalStorage」という関数を使って、localStorageの管理を実現してみました。

簡単に実装できるので、まずは@vueuse/coreをpackage.jsonに追加しましょう！

$ npm i @vueuse/core # yarn add @vueuse/core

localStorageを使うための準備

必要なのは、「useLocalStorageのimport」と「Keyの定数宣言」、「型の宣言」です

import { useLocalStorage } from '@vueuse/core'

const CustomStateKey = 'CUSTOM_STATE_KEY'
type CustomState = { name: string; age: number }

キー名の定数化や、ステート型の定義は手間かも知れませんが、後々マネジメントが楽になるので是非準備しておきましょう！

localStorageの初期化・呼び出し・書き込み

あとはuseLocalStorageを呼び出すだけです！
第一引数には「localStorageで使いたいKey」を
第二引数には「そのKeyに保存したい値」を入れます

実際に使っている風景は、全体としてこうなります

const store = useLocalStorage<CustomState>(CustomStateKey, {
  name: 'keisuke',
  age: 24,
})

// 値の取得
console.log(store.value.name)

// 値の更新
store.value.name = 'taniguchi'

useLocalStorageの第二引数は、「まだlocalStorageに該当するkeyがない場合にのみ」使われるので、画面をリロードしても、変更した値は保持されます！

まとめ

あっという間に実装できましたね！
VueUseは便利ですので、他の昨日も追って書いていこうと思います