【Vue3 Vuex4】で vuex-persistedstate を使う

Vuex の仕様上ブラウザの更新がされると Store の情報は消えてしまいます。Store でのデータ管理は便利ですがそれだと結構困る場合もあり、そんな時に使われる Store のデータを localstorage や sessionstorage に保存できる様にする vuex-persistedstate 、こちらを Vue3, Vuex4 の環境で使ってみたいと思います。(vuex-persistedstate 自体は前からありますが今回 Vue3, Vuex4 でも問題なく使えるという事で記事にしています。)

インストール

こちら git になります。→ https://github.com/robinvdvleuten/vuex-persistedstate

・npm

npm install --save vuex-persistedstate

・yarn

yarn add vuex-persistedstate

import と 設定

main.js で以下の様に import と設定をしていきます。

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import App from '@/App'
import modules from '@/store'

const app = createApp(App)
const store = createStore({
  modules: modules, 
  plugins: [createPersistedState({storage: window.sessionStorage})]

})

app.use(store) 
app.mount('#app')

上記では session storage を使いたかったので storage: で window.sessionStorage を指定しています。デフォルトでは local storage が使われます。そこで他にも storage の key などが指定できます。(デフォルのキーは “vuex" になります)

保存されているか確認

今回はある web サイトのログイン情報をブラウザ側で保存するとします。

保存後、下記の様にクロームの開発者モードで Application を選択して、左側の Session Storage を選ぶとうまく保存できているかが確認できます。

 

まとめ

今回は Vue3, Vuex4 での vuex-persistedstate の使用方法を紹介しました。 Vuex を使うと 実質グローバルな変数を使う事になるなど若干のデメリットもありますが、この様に他のプラグインと併用して便利な使い方ができるのはメリットだと感じています。

参考書籍

Vue3 を本で勉強したい方はこちらを参考にしてください。 3 になるとまだあまり種類は出ていない様です。

その他基礎から体系的に勉強したい方はこちらも。

Vue

Posted by tsukasa