追記
なし
はじめに
Vuex の仕様上ブラウザがリロードされると Store の保持している情報が消えてしまいます。
それを防ぎたい同じ気持ちの方へ、防ぐ方法をシンプルにお伝えします。
今回は、vuex-persistedstate を使用します。
具体的にはStore のデータを localstorage や sessionstorage に保存することになります。
今回は、sessionstorageに保存します。（私がこちらで実装した為）
インストール
npm
npm install --save vuex-persistedstate
yarn
yarn add vuex-persistedstate
storeファイル設定
store.js
import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import sample from '@/store/sample'
const store = createStore({
modules: {
sample : sample,
},
plugins: [createPersistedState({storage: window.sessionStorage})]
})
export default store
app.js
import App from '@/App.vue'
import store from '@/plugins/store'
import { createApp } from 'vue/dist/vue.esm-bundler'
const app = createApp(App)
app.use(store)
app.mount('#app')
今回はsessionstorage を使用するので storage: は window.sessionStorage を指定しています。
デフォルトでは localstorage が使用されます。
確認
上記を参考にGoogleChromeの開発者モードで アプリケーション を選択し、セッションストレージ を選ぶと保存できているかが確認できます。
まとめ
vue3、vuex4でも使えるのはありがたいです。