[vuex-persistedstate][js-cookie]2019年8月24日JavaScriptNuxt.jsにおいてStore(ストア)を利用すると、データの状態管理をおこなうVuexによってコンポーネント間のデータの受け渡しを一元化できます。Storage)に保存してみます。Storeにはクラシックモードとモジュールモードがありますが、本記事ではモジュールモードによる記述で説明していきます。2つのモードの違いについては公式サイトを参照して下さい。Nuxt.jsによるプロジェクトの作成は下記ページをご覧下さい。[$route.params][layouts]プロジェクト内のディレクトリを確認します。Storeによる機能は、主に「store」ディレクトリ内にファイルを追加していくことで利用できます。storeディレクトリ内にindex.jsファイルを作成し、下記のように編集します。Worldという文字列を設定しています。次にページコンポーネントを作成します。pagesディレクトリ内にtest.vueを作成し、下記のように編集します。{};</script>$storeは、storeに収められているオブジェクトです。表示されるのが確認できます。次にご多分に漏れずカウンター機能を追加してみます。引き続き、store/index.jsを下記のように編集します。2}}stateの値(上記ではmessageやcount)を変更するには、mutationsを利用します。本記事では説明しませんが、他にもactionsというmutations自体の処理をおこなう機能もあります。下記関連ページをご覧下さい。{this.$store.commit("increment");}}};</script>14行目mutationsの処理を呼び出すにはcommitを利用します。storeのnamespace(名前空間)仮にstoreディレクトリ内に、testディレクトリを作成してその中にsample.jsを追加します。4}}ページコンポーネント側では下記のようにして呼び出すことができます。Storageにデータを保存することができます(デフォルト設定)。vuex-persistedstate次にNuxt.jsのプロジェクト内のpluginsディレクトリ内にlocalStorage.jsファイルを作成し、下記のように編集します。ファイルのplugins項目に上記で作成したファイルを設定します。Storageに保存されるようになります。StorageのKeyとして使用されます。StorageのKeyを確認できます。デフォルトではvuexと設定されています。'my-key'})(store)})}特定のstateの値だけを保存することもできます。この説明のためにmessageも編集できるようにします。message}}changMessageに対して引数を受け取るようにします。this.message);}}};</script>4行目フォームを用意し、changMessage関数(23~25行目)を実行することによって、stateのmessageの値を変更できるようにしています。Storageに保存されますが、もしmessageだけを保存したい場合は、pathsにその名前を指定します。window.sessionStorage」を設定します。Storageを利用した場合は、画面(ブラウザ)自体を閉じるとデータが失われます。World)が表示されてしまいます(Chrom・Firefox)。Rendering)による処理の後にクライアント側で実行されるからです。本記事ではjs-cookieモジュールを利用することによってCookieにデータをもたせることで解決してみます。js-cookieをインストールします。js-cookie次にpluginsディレクトリ内にcookie-storage.jsファイルを作成し、下記のように編集します。pathsにcountを指定することにより、countだけCookieに保存しています。plugins項目に設定します。