2019年3月24日0件のコメントvue.jsを使って会員向けのWebサービスの構築を始めました。開発中に以下の問題にぶつかり、色々と解決方法を検索したところVue.jsならではの便利なモジュールを見つけましたのでご紹介します。Vuexを使っている方なら若干のソースコードを追加するだけで実現可能です。会員向けのデータをVuexで集約管理しているのだが、ページを再読み込みするとVuexのデータがクリアされる(それによって)ソースを修正するたびにページがリロードされてしまい、データが消える。頭から処理をしないと開発・テストが進められない。認証情報をVuexで管理しておりリロードするたびに再ログインしないといけないのが辛い対処の方向性Vuex上のデータをクライアント上に保存しておき、リロードの際はクライアントデータを取得することでページを復活させられないか?で色々と検索したところ、「ローカルストレージ」というものが使えそうなことがわかりました。ローカルストレージって何?クライアントのブラウザ上にデータを保存する仕組み永続に保存されるWebサービスからでもデータアクセス(保存、参照)可能なるほど。あれば、VuexのJSからローカルストレージにアクセスして必要な情報だけローカルストレージに保存しておく仕組みを作っておけばいいのかなぁ?と考え行動しそうになったのですが、ちょっと待てと。ローカルストレージ」で検索してみました。すると、超便利なモジュールがやはり見つかりました笑。Vue.jsはここがいいですよね。使ってみた感じ、以下を勝手にやってくれてます。Vuexに突っ込んだデータのローカルストレージへの保存ページリロードや再度アクセスした際にローカルストレージからデータを取得してきて、Vuexの復元(これによって)ページリロード時に再ログインさせる必要がなくなり、めっちゃ開発効率化しました!vuex-persistedstateの導入vuex-persistedstateの導入はめっちゃ簡単。設定レベルでできます。私の場合はこんな感じでVuexはモジュール化しています。モジュールのファイル(modules/user.js)には設定不要です。})以上、設定終わりです。これ以上に特別な設定は必要ありませんでした。左メニューのStorage>LocalStorageの「▼」を押して、対象のドメインを表示。ドメインをクリックこちらで確認できます!!さいごにめっちゃ便利。次回からは毎回インストールしてから開発やるようにしたい。カツオが開発したWebサービスです。「セールサーチ」ネットショップのセール情報の検索サイト!平成の想い出を気軽に年表にしてシェアすることができるサービスです。コメントをキャンセルメールアドレスが公開されることはありません。非エンジニアが個人開発したWebサービスをリリースしてみてfirestoreのセキュリティルール設定(firebaseでユーザー・役割ごとの権限制御)最近のコメント33歳。起業について思うこと。