どうもこじらです。
Nuxt.jsのドキュメントが思ったより充実してません。
公式はなぜか404 Not Foundばっかりです。なんなんでしょう、これは一次的なものなんでしょうか?
親切な方々がネットに色々情報を提供してくださっているので、それを頼りにVue.js→Nuxt.jsの移行を行っていますが、私のようなVue.js初心者ではなかなか答えにたどり着けず苦戦してしまいます。
ということで、今回はNuxt.js環境でのvuex-persistedstateがちょっとイケてなくて困った話。
vuex-persistedstateとは
![](https://noumisoblog.com/wp-content/uploads/2020/10/デベロッパーツールで確認1-160x90.png)
vuex-persistedstateの話はこの間したので、過去記事の方を参照していただけると嬉しいです。
まぁざっくり言うと、storeとローカルストレージをいい感じに同期をとってくれるものです。
Nuxt.js環境でのvuex-persistedstate
Nuxt.js環境でのvuex-persistedstateはプラグインとして配置します。
Vue.jsでstore/index.jsとして記述していたものは、少し内容を改変してNuxtプロジェクトのstore/index.jsに転記します。
この辺は公式ドキュメントを参照してください。
別に難しくないです。
![](https://noumisoblog.com/wp-content/uploads/cocoon-resources/blog-card-cache/13b44a77bc1d6983ae57464406c45b68.png)
プラグインとして追加したソースは以下です。
plugins/localStorage.js
import createPersistedState from 'vuex-persistedstate' export default ({ store }) => { window.onNuxtReady(() => { createPersistedState({ key: '任意のキー' })(store) }) }
あとはnuxt.config.jsのpluginsに追記したくらい?
「あーこれだけでいいのか!vuex-persistedstateは優秀だな!^ ^」
と思っていました。
実際にローカルストレージに保存されていることも確認していたので安心していました。
しかし、ことは突然起きました。
本題:vuex-persistedstateが思ったよりイケてない
this.$store.gettersで取得できない!?
画面のmounted()部分でthis.$store.getters.userIdでログインしているユーザのIDをstoreから取得する処理を記述していました。
Vue.js素使いの環境ではうまくいっていて、vuex-persistedstateにも謎の信頼を置いていたので安心しきっていました。
しかし、リロード時に
なぜかthis.$store.getters.userIdでユーザIDが取得できませんでした。。
状況を把握するためにconsole.log()を仕込んでコンソールを確認してみました。
・store/index.js
export const state = () => ({ userId: '' }) export const getters = { userId (state) { return state.userId } } export const mutations = { setUserId (state, userId) { state.userId = userId } } export const actions = { setUserId ({ commit }, value) { commit('setUserId', value) } }
・mounted部分
mounted () { // 追加 start console.log(this.$store) // 105行目 console.log(this.$store.getters) // 106行目 console.log(this.$store.getters.userId) // 107行目 // 追加 end this.userId = this.$store.getters.userId if (this.userId) { // 色んな処理 } else { alert('不正な操作が行われました。') this.$router.push('/home') } },
・コンソール
ん!?どういうことだ!??
this.$store.gettersの中にはuserIdが存在しているが、this.$store.getters.userIdでは取得できていないだと!!?
意味が分からないのでとりあえず、storeがローカルストレージから値を取得するタイミングを調べてみました。
ローカルストレージ→storeのコピーはナビゲーションバーのところで監視していたので、そこにconsole.log()を仕込んでみました。
……って、mounted()の後にコピーされてんじゃねぇか!!!
これは流石に草
解決方法
状況が分かったので色々ググってみたら、
- storeのmoduleを使ってプラグインのタイミングに読み込ませる方法
- mounted()内の処理のタイミングを遅らせる方法
- nuxt-client-init-moduleをインストールする方法
ざっくり、この3つが解決方法として見つかりました。
記事のリンクは張っておきます。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9dnVleC1wZXJzaXN0ZWRzdGF0ZSVFMyU4MSVBRSVFNSU4MCVBNCVFMyU4MSU4QyVFNSVCRSVBOSVFNSVCOCVCMCVFMyU4MSU5NyVFMyU4MSVBQSVFMyU4MSU4NCVFRiVCQyU4MSVFRiVCQyU5RiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9N2Q0OWViOGZlMzI3MmI2NTQ2NTk1NDdmM2Y3NTQzMzM&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzc2tteTEwMjR5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hNWZmMTBiNzhjZjc5ZjliNjM3MTgwNWMzNTlkNTYyNw&blend-x=142&blend-y=436&blend-mode=normal&txt64=aW4gVW5pcG9z5qCq5byP5Lya56S-&txt-width=770&txt-clip=end%2Cellipsis&txt-color=%23212121&txt-font=Hiragino%20Sans%20W6&txt-size=36&txt-x=156&txt-y=536&s=9ab1729c79c6c017471a650a2291cf49)
私は一番影響が少ない、3つ目の「nuxt-client-init-moduleをインストールする方法」を選択しました。
どすこいこいドットコム(dosukoikoi.com)さんの記事を参考に導入を進めます。
nuxt-client-init-moduleのインストール
npm install nuxt-client-init-module
はい、インストール完了。
ソースに追記
nuxt.config.js
modules: [ 'nuxt-client-init-module' ],
modulesに定義。
store/index.js
export const actions = { nuxtClientInit ({ commit }, context) { const data = JSON.parse(localStorage.getItem('brain-juice')) || [] if (data.userId) { commit('setUserId', data.userId) } } }
storeのactions内にnuxtClientInit()という関数を追加。
完了。
直リンOK。リロードしてもうまく動いた。
何か問題があったらまた報告します。
こじらでした
じゃ
コメント