vuex-persistedstateを使っていると、ストアを変更しても前のデータがlocalStorageに残って困る

VueやNuxtのプロジェクトでよく使われるvuex-persistedstateというストア永続化プラグインがあります。 このプラグインはストアの内容をlocalStorageに永続化してくれるものです。

問題

ストアの内容を永続化し、ページを開いた時ストアに再展開してくれるのですが、開発中ストアの構造を変更した時などに問題が発生します。

例えばストアにAというデータを保存しているとします。 開発の都合でAというデータを消したとします。 しかしlocalStorage上にはvuex-persistedstateがストアの内容を保存している為、ページをロードした時点でAというデータをストアに格納してしまします。 しかもlocalStorageに保存している為、リロードやキャッシュクリア、ブラウザの再起動では消えません。

これに気づかず変更が読み込まれていないのかと戸惑いました。

解決策

今のところ解決策は2つです。

1. ブラウザからlocalStorageを初期化する
2. コード上でlocalStorage.clear()をする

1. ブラウザからlocalStorageを初期化する

ブラウザごとに方法が違うのでこちらの外部サイトをご覧ください。

doc.arcgis.com

2. コード上でlocalStorage.clear()をする

このコードはアプリケーション上で実行してもいいですし、開発者ターミナルから実行することもできます。

以下の1行でサイトのlocalStorageを全て初期化することができます。

window.localStorage.clear();

localStorageにはストアの内容以外にも保存されている場合があります。 それらは消さずにストアの内容だけを消したい場合は以下のようにすると良いです。

window.localStorage.removeItem('vuex');

別の方法

localStorageに保存されるのが面倒な場合は保存先を変更することもできます。 sessionStorageやcookieに設定することもできる為、開発中だけそちらにするといった方法もあるかもしれませんね。