nuxtjsでvuex-persistedstateを利用する

はじめに

• ブラウザをリロードすると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)
}

• storeの指定は下記ようにする

export default {
  namespace: true,
  state: () => (
    {
      dummystroe: {
        name: '',
        age: '',

window.onNuxtReadyについて

• ストレージの読み込むタイミングでエラーが発生したらwindow.onNuxtReadyを利用して地縁ローディングさせる。
• Nuxt.jsアプリケーションがロードされて準備ができた後にいくつかのスクリプトを実行したい場合は、window.onNuxtReady関数を使用できます。 ja.nuxtjs.org