ストックドッグスマートフォン用の表示で見るストックドッグKatoTakahiro。金融系の会社で働くSEが株やPython、その他諸々について書いています。Vue.jsフロントの開発初心者のぼくはVuexはストレージ的なライブラリであると勘違いしていました。(props)で行っていた場合に、リロードすると受け渡ししたデータが初期化される、というのは理解していました。Vuexで管理してもなるやん、と。Vuexの理解足りんなと、勉強し直したわけで、いろいろドキュメントを読むと、FluxやReduxの思想に影響を受けたとか書いてありますが、まずそいつら知らん。使ったことのない技術のドキュメントを読んでもなかなか理解進まないものですが、ようやく毛ほどは理解できるようになったので備忘を兼ねて記事に。vuex.vuejs.orgどうやったらアプリケーション内でのデータ管理がうまくできるか、という考え方、いい感じにいうと設計思考であるFluxを元に作られているのがVuexです。(Vuexの公式には影響を受けている、と書いてありますね)データを"グローバルシングルトンで管理する"と公式ドキュには書いてありますが、ようはグローバルにデータを定義しよう、ということ。(言い換えになっていない)vueで言う、componentをローカルで定義するか、グローバルで定義するか、vuexではデータをグローバルに定義しているってことになる。コンポーネント間でデータの受け渡しを定義してたら大変だから、グローバルに定義して、どの階層にいるコンポーネントからでもデータにアクセスできるようにしよう、とそういうことですね。ストレージ要素はありません...なので、リロードするとデータが初期化される、という問題はVuexで定義しようと、プロパティ(Props)で定義しようとまったく関係ありません。どちらも保存先はメモリなので。vuex-persistedstate解決策としては、メモリ以外の場所にデータを保存する、であり保存する場所はリロードしても消えない場所です。選ばれたのは、WebStorageでした。Vuexで定義されたデータをWebStorageに保存するライブラリがvuex-persistedstateです。WebStrageデータをブラウザに保存することができる仕組み。APIのStrageには、localStrageとsessionStrageの2種類の保存先があり、どちらもJavaScriptで使えるので、例えばChromeのコンソールから使うことができる。呼び出したlocalStorage["hello"]今使ったのはlocalStrageで、localStrageとsessionStrageは全然違うので用途によって使い分ける。www.htmq.comvuex-persistedstateでは、デフォルトでlocalStorageに保存される。「リロードするとVuexのデータが初期化される問題」は解決する。(27)注目記事プロフィール金融系の会社で働くSEが株やPython、その他諸々について書いています。読者になるスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。