KJ DEV
How to

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

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

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

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

目次
  1. Nuxt.jsでlocalStorageを使う方法
    1. vuexが標準搭載のNuxt.jsではvuex-persistedstateをあわせて使う
  2. Nuxt.jsでサーバーサイドでレンダリングをおすすめしないほうが良い場合
  3. DBが必要なければNuxt.jsとvuex-persistedstateはいい組み合わせ

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の組み合わせは開発スピードをかなり上げることができますね。

開発で参考になった本

実際に読んでみて開発に役立った本を紹介しています。

これから本格的にデザインシステムを学んで作りたい時にとても参考になる一冊でした。デザインシステムついて幅広く触れられているけど、「tailwindを触ってデザインシステムに興味を持った」という人でも少しずつ取り入れやすいです。