はじめに
- ブラウザをリロードするとvuexのstoreのデータが削除されてしまうため、vuex-persistedstateを利用してみる。
インストール
yarn add vuex-persistedstate
github.com
保存先にセッションストレージを利用する場合
window.sessionStorage
を指定することで明示的にセッションストレージを利用することを宣言する
paths
に指定する名前はstoreのnamespaceで指定された名前を指定する。またpathsに指定すると、指定したstoreのみが保存される
import createPersistedState from 'vuex-persistedstate'
export default ({ store }) => {
createPersistedState({
key: 'hogehoge',
paths: [
"dummystroe"
],
storage: window.sessionStorage
})(store)
}
export default {
namespace: true,
state: () => (
{
dummystroe: {
name: '',
age: '',
window.onNuxtReadyについて
- ストレージの読み込むタイミングでエラーが発生したら
window.onNuxtReady
を利用して地縁ローディングさせる。
- Nuxt.jsアプリケーションがロードされて準備ができた後にいくつかのスクリプトを実行したい場合は、window.onNuxtReady関数を使用できます。
ja.nuxtjs.org