どうもこじらです。
Nuxt.jsのドキュメントが思ったより充実してません。
公式はなぜか404 Not Foundばっかりです。なんなんでしょう、これは一次的なものなんでしょうか？
親切な方々がネットに色々情報を提供してくださっているので、それを頼りにVue.js→Nuxt.jsの移行を行っていますが、私のようなVue.js初心者ではなかなか答えにたどり着けず苦戦してしまいます。
ということで、今回はNuxt.js環境でのvuex-persistedstateがちょっとイケてなくて困った話。
vuex-persistedstateとは
vuex-persistedstateの話はこの間したので、過去記事の方を参照していただけると嬉しいです。
まぁざっくり言うと、storeとローカルストレージをいい感じに同期をとってくれるものです。
Nuxt.js環境でのvuex-persistedstate
Nuxt.js環境でのvuex-persistedstateはプラグインとして配置します。
Vue.jsでstore/index.jsとして記述していたものは、少し内容を改変してNuxtプロジェクトのstore/index.jsに転記します。
この辺は公式ドキュメントを参照してください。
別に難しくないです。
プラグインとして追加したソースは以下です。
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つが解決方法として見つかりました。
記事のリンクは張っておきます。
私は一番影響が少ない、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。リロードしてもうまく動いた。
何か問題があったらまた報告します。
こじらでした
じゃ
コメント