Nuxt.jsでvuex-persistedstateを使ってlocalStorageに保存してみた

Nuxt.jsでvuex-persistedstateを使ってlocalStorageに保存してみました。

ハマったのでメモに残します。

Nuxt.jsでlocalStorageにデータを保存して使いたい

1. vuex-persistedstateをインストール

Nuxt.jsの環境で以下コマンドを実行。

npm install –save vuex-persistedstate

2. nuxt.config.js を修正

plugins: [
  { src: "@/plugins/persistedstate.js", ssr: false },
  // 以下略   
],
mode: 'spa' // ここの設定が漏れていてハマった

3. plugins/persistedstate.js を追加


import createPersistedState from "vuex-persistedstate";

export default ({store, isHMR}) => {
  if (isHMR) return;

  if (process.client) {
    window.onNuxtReady((nuxt) => {
      createPersistedState(
          {
              key: 'your_key',
          }
      )(store); 
    });
  }
};

4. storeディレクトリ配下に処理を追加

ここは詳細は省きますがvuexを使用してlocalStorageに保存する処理を記載。

今回ハマったところ

nuxt.config.js に「mode: ‘spa’」の設定が漏れていたためSSRの仕組みで動いていた?ようです。

そのためHTMLがレンダリングされた後、localStorageの値が取得され反映されるため見た目がガクガクとしておかしな状態になっていた。

SPAはクライアント側でHTMLの生成も行うため、クライアント側のlocalStorageを利用する際はSPAを利用するといいようです。

 

メモとして今回残します。