Nuxt.jsでvuexとlocalStorageをあわせて使う方法
Nuxt.jsでlocalStorageを使って簡単な計算機アプリを作ってみました。
データベースは使わずすべてのデータはlocalStorageに保存しました。
今回はじめてNuxt.jsでlocalStorageをあわせて使ったので、どのような風に使うかを書きます。
- 目次
Nuxt.jsでlocalStorageを使う方法
Nuxt.jsでlocalStorageをそのまま使うとエラーになります。
原因はサーバーサイドでレンダリングする際にlocalStorageが参照できないためです。
localStorageのデータが画面を作るためにメインの情報であれば、Nuxt.jsではサーバーサイドのレンダリングは辞めてフロントだけでレンダリングするのがおすすめです。
nuxt.config.jsのmodeにspaを指定するとフ ロントだけで表示できます。
1 2 3
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.](https://github.com/robinvdvleuten/vuex-persistedstate)
Nuxt.jsでpluginとして使うことも想定されています。
使い方はREADMEを見るとひと目で分かると思うので、こちらでは割愛します。
Nuxt.jsでサーバーサイドでレンダリングをおすすめしないほうが良い場合
サーバーサイドでレンダリングすることSEOの面では確かに有利です。
ですがlocalStorageが画面を作る上で多くの情報を占める割合が多い時は、先に書いたようにフロントだけのレンダリングにしてしまったほうが良いと思っています。
理由はlocalStorageのデータを画面に反映するまでは、サーバーサイドで設定した初期値が表示されてしまうからです。
例えば下記のような場合です。
1
<div>こんにちは{{ name }}さん</div>
のようなテンプレートでnameがlocalStorageのデータであった場合は「こんにちはさん」と表示されてから、nameの値が画面に反映されてしまいます。
この状態を気にしなければサーバーサイドでレンダリングしても良いかと思いますが、閲覧する人によってはかなり気になる挙動です。
DBが必要なければNuxt.jsとvuex-persistedstateはいい組み合わせ
vuex-persistedstateを使うとlocalStorageにvuexのデータが入っているので、手動でデータを触りたい場合にはちょっと手間でしたが、開発者ツールのコンソールからデータをリセットして対応していました。
こんな感じです。
1
localStorage.removeItem('vuex') // vuex-persistedstateのデフォルトのnamespaceがvuex(変更可)
データベースは使うほどではないけど、localStorageは使う。
こういう用途のアプリだとNuxt.jsとvuex-persistedstateの組み合わせは開発スピードをかなり上げることができますね。