イイダリョウのブログ。【Vue.js】vuex-persistedstateでデータをローカルストレージに保存する2020-01-07【Vue.js】vuex-persistedstateでデータをローカルストレージに保存するJSVue.jsの続きです。前回はVuexのミューテーション(mutations)に設定した「いいね」アイコンのカウント処理を読み込んで実行しました。今回はvuex-persistedstateでそのカウント数をローカルストレージに保存してみたく。クモのようにコツコツと※参考:Vue.jsの習得のためにやったことまとめqiita.comvuex-persistedstateをインストールする「vuex-persistedstate」はVuexのプラグインでVuexのステートの値をローカルストレージに保管する。Vuex本体とは別途でインストールする。Nuxt.js超入門」を参考に進める。単行本まずターミナルを立ちげてcdコマンドでプロジェクトのフォルダに移動する。installコマンドでプラグインをインストールする。vuex-persistedstatevuex-persistedstate@2.7.0というバージョンがインストールされた。Nuxt.jsのモードをSSR→SPAに変更するローカルストレージはブラウザ(クライアントサイド)の機能のため、Nuxt.jsのモードをSSR(サーバサイドレンダリング)ではなくSPA(シングルページアプリケーション)に変更しないと動かないようだ。プロジェクトフォルダの直下にあるnuxt.config.jsというファイルを開く。default中は連想配列でmodeキーがある。//後略}値はuniversalになっている。これはSSR(サーバサイドレンダリング)モードを意味している。これをspaに変更する。//後略}これでSPA(シングルページアプリケーション)モードになる。前回のおさらい(index.js)storeフォルダの中のindex.jsを開く。vuexTestvuexをインポート関数vuexTestの中でストアを設定stateでメッセージ、アイコン、カウンターの初期値を設定mutationsでカウンターの加算、リセット処理を設定vuexTestをエクスポートこれが前回の状態。createPersistedStateはvuex-persistedstateに用意されているオブジェクト。createPersistedState()をストアに設定する関数vuexTestのストアにcreatePersistedState()を設定する。上記の設定だけで値がローカルストレージに保存されるらしい。npmプロジェクトを立ち上げる。dev前回同様、下層ページ「counter」を開いてみる。」いいねアイコンを何度か押してみる。やた!変わらない!シフトを押しながらいいねするとちゃんと0にリセットする。デベロッパーツールの「Applicagtion」タブの「LocalStrage」を確認する。counterキーに12という値が保存されている!試しにSSRモードで立ち上げてみるSSRモードで本当に動かないか確かめる。//後略まずnpmプロジェクトを立ち上げる。dev下層ページ「counter」を開いてみる。http://localhost:3000/counterエラーになった。SPAモードじゃないとうまく動かないようだ。最後にということでVuexのプラグインvuex-persistedstateを使ってデータをローカルストレージに保存しました。これでブラウザをリロードしたり閉じたりしてもデータが保持されるようになしました。設定も簡単だったしプラグインの追加の仕方もわかりました。Nuxt.js超入門」ではこの後メモアプリを作ったり、AxiosでJSONファイルと連携したりFirebaseでDBと連携したりしていきます。書籍の通りの順番でやってみるか検討していますが、引き続き宜しゅう。16:03Tweet関連記事2020-02-13ExpressとJSフレームワーク(React、Vue、Angularなど)との関係について調べたこ...Node.jsのフレームワークExpress。JSフレームワークReact、はじめました。今回は初回...2019-12-20【Vue.js】Vuexのミューテーション(mutations)に設定した処理を実行するVuexの続きです。前回はVuexストアのステートに保管したデータ...2019-12-11【Vue.js】Vuexのストアに値を保管してコンポーネントに表示するVuexの続きです。前回はVuexが何を管理しているのか調べました...2019-12-03【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べたVue.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。