Nuxt.jsでvuexとlocalStorageをあわせて使う方法

Nuxt.jsでlocalStorageを使って簡単な計算機アプリを作ってみました。

データベースは使わずすべてのデータはlocalStorageに保存しました。

今回はじめてNuxt.jsでlocalStorageをあわせて使ったので、どういう風に使うかを書きます。

作ったアプリはこちらです。

NM Goods

Nuxt.jsでlocalStorageを使う方法

Nuxt.jsでlocalStorageをそのまま使うとエラーになります。

原因はサーバーサイドでレンダリングする際にlocalStorageが参照できないためです。

localStorageのデータが画面を作るためにメインの情報であれば、Nuxt.jsではサーバーサイドのレンダリングは辞めてフロントだけでレンダリングするのがおすすめです。

nuxt.config.jsのmodeにspaを指定することでフロントだけで表示することができます。

module.exports = {
  mode: 'spa'
}

vuexが標準搭載のNuxt.jsではvuex-persistedstateをあわせて使う

Nuxt.jsではデータ管理にvuexを使うことができます。

localStorageを使う場合はvuexにlocalStorageのデータを保存んできるライブラリ「vuex-persistedstate」を使うのがおすすめです。

robinvdvleuten/vuex-persistedstate: Persist Vuex state with localStorage.

Nuxt.jsでpluginとして使うことも想定されています。

使い方はREADMEを見るとひと目で分かると思うので、こちらでは割愛します。

Nuxt.jsでサーバーサイドでレンダリングをおすすめしないほうが良い場合

サーバーサイドでレンダリングすることSEOの面では確かに有利です。

ですがlocalStorageが画面を作る上で多くの情報を占める割合が多い時は、先に書いたようにフロントだけのレンダリングにしてしまったほうが良いと思っています。

理由はlocalStorageのデータを画面に反映するまでは、サーバーサイドで設定した初期値が表示されてしまうからです。

例えば下記のような場合です。

<div>こんにちは{{ name }}さん</div>

のようなテンプレートでnameがlocalStorageのデータであった場合は「こんにちはさん」と表示されてから、nameの値が画面に反映されてしまいます。

この状態を気にしなければサーバーサイドでレンダリングしても良いかと思いますが、閲覧する人によってはかなり気になる挙動です。

DBが必要なければNuxt.jsとvuex-persistedstateはいい組み合わせ

vuex-persistedstateを使うとlocalStorageにvuexのデータが入っているので、手動でデータを触りたい場合にはちょっと手間でしたが、開発者ツールのコンソールからデータをリセットして対応していました。

こんな感じです。

localStorage.removeItem('vuex') // vuex-persistedstateのデフォルトのnamespaceがvuex(変更可)

データベースは使うほどではないけど、localStorageは使う。

こういう用途のアプリだとNuxt.jsとvuex-persistedstateの組み合わせは開発スピードをかなり上げることができますね。

この記事を書いた人

コウジ

TypeScriptとVue.jsが好きなフリーランスのフロントエンドエンジニアです。
フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。

Web開発の仕事依頼

フリーランスのエンジニアとしてWeb開発の仕事をお引き受けしています。

依頼の検討をしていただきます際はポートフォリオサイトの事業・実績ページをご覧いただき、お問い合わせよりメールや各種SNSよりご連絡ください。

仕事の相談をする
基礎から学ぶ Vue.js