【Vue3】 vuex-persistedstate のStore に反映されるタイミング問題
以前下記の記事で vuex-persistedstate の紹介をしました。
しかし今回このプラグインによって localStorage から Store に反映されるタイミングが問題で思い通りの挙動にならない事で困る場面がありましたのでそれについてです。
localStorage から Store に反映されるのは onMounted の後
これは色々な記事で紹介されている事ですが、なんとやや不便な事に Vue3 であれば onMounted (2系であればmounted)が実行された後のタイミングになるようです。
今回やりたかったのはログイン状態を store に保存しているので、
ログアウト → store のログイン用トークンチェック → プロフィール表示を変更
のようなよくある流れの際に変更が反映されないという問題に当たりました。
例えばこちらの記事でこの様な Store に反映されるタイミング問題の解決方法を紹介されています。
ただ今回 nuxt ではないのでプラグインで対応したりはできないのと mounted のタイミングをタイマーで送らせたりというのも表示がやや遅くなったり全ページの mounted に timer を入れる煩わしさもあります。
そこで今回もう少し単純な方法で解決しました。
直で localStorage を参照
方法は単純で、 localStorage の値を直で参照してログイン用のトークンがあるかどうかを見てそれによって強制的に store に commit します。
if(localStorage.getItem("vuex").indexOf( 'token\":null' ) !== -1) {
store.commit('login/setToken', null)
}localStorage 上は文字列で保存されているので indexOf で対象のものが含まれているかどうかを判断しています。今回ログインした際に token が得られる様な作りなのでその token がなければ store にも null を先に commit してしまっています。
またこれを router.beforeEach の中で行っています。 これによってそれぞれのページに遷移する前にトークンのチェックを行ってそれぞれの画面でログイン状態による画面の出しわけが可能になります。
まとめ
以上単純ですが追加のモジュール無しでかつコードも複雑化させない方法ではある気がしますので vuex-persistedstate を使用した際に同じ様な問題に当たった際はこちらの方法も有効ではないでしょうか。
参考書籍
Vue3 を本で勉強したい方はこちらを参考にしてください。 ３ になるとまだあまり種類は出ていない様です。
その他基礎から体系的に勉強したい方はこちらも。
