How to2021.04.02

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'
}

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を見るとひと目で分かると思うので、こちらでは割愛します。

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

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

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

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

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

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

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

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

こんな感じです。

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

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

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