リロードするとVuexのデータが初期化される問題

フロントの開発初心者のぼくはVuexはストレージ的なライブラリであると勘違いしていました。

なのでVuexを使えば、「リロードするとVuexのデータが初期化される問題」は解決されると...

もちろん、コンポーネント間のデータ受け渡しをプロパティ (props)で行っていた場合に、リロードすると受け渡ししたデータが初期化される、というのは理解していました。

が、Vuexで管理してもなるやん、と。

ちょっとVuexの理解足りんなと、勉強し直したわけで、

いろいろドキュメントを読むと、FluxやReduxの思想に影響を受けたとか書いてありますが、まずそいつら知らん。

使ったことのない技術のドキュメントを読んでもなかなか理解進まないものですが、ようやく毛ほどは理解できるようになったので備忘を兼ねて記事に。

解決策

$ npm install vuex-persistedstate

import createPersistedState from 'vuex-persistedstate'

const path =     {
    // データ定義
}

export default new Vuex.Store({
        modules: {
                path
        },
        plugins: [createPersistedState()]
})

github.com

Vuex

VuexはVue.jsアプリケーションのための状態管理パターン + ライブラリです。

vuex.vuejs.org

どうやったらアプリケーション内でのデータ管理がうまくできるか、という考え方、いい感じにいうと設計思考であるFluxを元に作られているのがVuexです。
（Vuexの公式には影響を受けている、と書いてありますね）

データを"グローバルシングルトンで管理する"と公式ドキュには書いてありますが、ようはグローバルにデータを定義しよう、ということ。（言い換えになっていない）

vueで言う、componentをローカルで定義するか、グローバルで定義するか、vuexではデータをグローバルに定義しているってことになる。

コンポーネント間でデータの受け渡しを定義してたら大変だから、グローバルに定義して、どの階層にいるコンポーネントからでもデータにアクセスできるようにしよう、とそういうことですね。

まったくストレージ要素はありません...

なので、リロードするとデータが初期化される、という問題はVuexで定義しようと、プロパティ(Props)で定義しようとまったく関係ありません。

どちらも保存先はメモリなので。

vuex-persistedstate

解決策としては、メモリ以外の場所にデータを保存する、であり保存する場所はリロードしても消えない場所です。

選ばれたのは、WebStorageでした。

Vuexで定義されたデータをWebStorageに保存するライブラリがvuex-persistedstateです。

WebStrage

データをブラウザに保存することができる仕組み。

WebStrage APIを使って使用することができるので、ChromeやFirefoxならもちろん使用可！

WebStrage APIのStrageには、localStrageとsessionStrageの2種類の保存先があり、どちらもJavaScriptで使えるので、例えばChromeのコンソールから使うことができる。

# 定義した
localStorage.hello = 'World'

# 呼び出した
localStorage["hello"]

今使ったのはlocalStrageで、localStrageとsessionStrageは全然違うので用途によって使い分ける。

以下、参照。

www.htmq.com

vuex-persistedstateでは、デフォルトでlocalStorageに保存される。

まとめ

Vuexで定義したデータをvuex-persistedstateを使ってlocalStrageに保存することで、

「リロードするとVuexのデータが初期化される問題」は解決する。

以上、終わり！