Nuxt.jsのStoreによるデータ保存 [vuex-persistedstate][js-cookie]

2019年8月24日

Nuxt.jsにおいてStore(ストア)を利用すると、データの状態管理をおこなうVuexによってコンポーネント間のデータの受け渡しを一元化できます。本記事ではそのStoreとvuex-persistedstateモジュールを利用してデータをLocal Storage(もしくはSession Storage)に保存してみます。

 

Storeにはクラシックモードモジュールモードがありますが、本記事ではモジュールモードによる記述で説明していきます。2つのモードの違いについては公式サイトを参照して下さい。

 

Nuxt.jsによるプロジェクトの作成は下記ページをご覧下さい。

 

Nuxt.js入門 [$route.params][layouts]

 

 

プロジェクト内のディレクトリを確認します。Storeによる機能は、主に「store」ディレクトリ内にファイルを追加していくことで利用できます。

 

 

まずはHello Worldから。storeディレクトリ内にindex.jsファイルを作成し、下記のように編集します。

 

store/index.js

stateのmessageという値に対して、Hello Worldという文字列を設定しています。

 

次にページコンポーネントを作成します。pagesディレクトリ内にtest.vueを作成し、下記のように編集します。

 

pages/test.vue

$storeは、storeに収められているオブジェクトです。

 

以上で http://localhost:3000/test にて Hello World と表示されるのが確認できます。

 

 

mutationsによるstateの変更


 

次にご多分に漏れずカウンター機能を追加してみます。引き続き、store/index.jsを下記のように編集します。

 

store/index.js

stateの値(上記ではmessageやcount)を変更するには、mutationsを利用します。本記事では説明しませんが、他にもactionsというmutations自体の処理をおこなう機能もあります。下記関連ページをご覧下さい。

 

関連ページ

Vue CLI 3 ではじめるVue RouterとVuex入門

 

 

pages/test.vue

14行目

mutationsの処理を呼び出すにはcommitを利用します。

 

 

storeのnamespace(名前空間)


 

仮にstoreディレクトリ内に、testディレクトリを作成してその中にsample.jsを追加します。

 

store/test/sample.js

 

ページコンポーネント側では下記のようにして呼び出すことができます。

 

pages/test2.vue

 

 

vuex-persistedstate でデータをLocal Storageに保存する


 

上述までの説明では画面をリロードしたり閉じたりするとcountの数値は初期化されてしまいますが、vuex-persistedstate モジュールを利用するとWeb StorageであるLocal Storageにデータを保存することができます(デフォルト設定)。

 

vuex-persistedstate をインストールします。

 

次にNuxt.jsのプロジェクト内のpluginsディレクトリ内にlocalStorage.jsファイルを作成し、下記のように編集します。

 

plugins/localStorage.js

 

最後に nuxt.config.js ファイルのplugins項目に上記で作成したファイルを設定します。

 

以上でstoreに設定したすべてのstateがLocal Storageに保存されるようになります。

 

keyに名前を設定するとLocal StorageのKeyとして使用されます。デベロッパーツール等でLocal StorageのKeyを確認できます。デフォルトではvuexと設定されています。

 

plugins/localStorage.js

 

 

特定のstateの値だけを保存することもできます。この説明のためにmessageも編集できるようにします。

 

store/index.js

changMessageに対して引数を受け取るようにします。

 

pages/test.vue

4行目

フォームを用意し、changMessage関数(23~25行目)を実行することによって、stateのmessageの値を変更できるようにしています。

 

上述までの状態だとstateにおけるすべての値(messageおよびcount)がLocal Storageに保存されますが、もしmessageだけを保存したい場合は、pathsにその名前を指定します。

 

store/index.js

 

 

Session Storageへの保存


 

同じくWebStorageであるSession Storageを利用したい場合は「storage: window.sessionStorage」を設定します。Session Storageを利用した場合は、画面(ブラウザ)自体を閉じるとデータが失われます。

 

plugins/localStorage.js

 

 

js-cookieによるCookieへの保存


 

上述までの説明で実際に実装してみると、画面のリロード(reload)時に一瞬データの初期値(messageだとHello World)が表示されてしまいます(Chrom・Firefox)。これはvuex-persistedstate自体がSSR(Server Side Rendering)による処理の後にクライアント側で実行されるからです。本記事ではjs-cookieモジュールを利用することによってCookieにデータをもたせることで解決してみます。

 

js-cookieをインストールします。

 

次にpluginsディレクトリ内にcookie-storage.jsファイルを作成し、下記のように編集します。pathsにcountを指定することにより、countだけCookieに保存しています。

 

plugins/cookie-storage.js

 

作成したcookie-storage.js をplugins項目に設定します。

 

plugins/cookie-storage.js

 

 

参照ページ


 

Vuex Store の永続化

 

Nuxt.js で SSR 時にも永続化された store の値を使う

 

SSR vuex store in NUXT

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー