【Nuxt.js】vuex-persistedstateがイケてなくてリロード時にgettersでnullになった話

プログラミング等

どうもこじらです。

Nuxt.jsのドキュメントが思ったより充実してません。

公式はなぜか404 Not Foundばっかりです。

 

親切な方々がネットに色々情報を提供してくださっているので、それを頼りにVue.js→Nuxt.jsの移行を行っていますが、私のようなVue.js初心者ではなかなか答えにたどり着けず苦戦してしまいます。

ということで、今回はNuxt.js環境でのvuex-persistedstateがちょっとイケてなくて困った話。

vuex-persistedstateとは

【Vue.js】ローカルストレージの監視とvuex-persistedstate
どうも、趣味でVue.jsを触っているVue.js初心者のこじらです。 今回は、 「ログイン情報をローカルストレージで保存させて、ブラウザのリロードがされた場合も情報を保持できるようにしたいな🤔」 と思って、Vue.jsに...

vuex-persistedstateの話はこの間したので、過去記事の方を参照していただけると嬉しいです。

まぁざっくり言うと、storeとローカルストレージをいい感じに同期をとってくれるものです。

Nuxt.js環境でのvuex-persistedstate

Nuxt.js環境でのvuex-persistedstateはプラグインとして配置します。

Vue.jsでstore/index.jsとして記述していたものは、少し内容を改変してNuxtプロジェクトのstore/index.jsに転記します。

この辺は公式ドキュメントを参照してください。

別に難しくないです。

vuex-persistedstate
Persist and rehydrate your Vuex state between page reloads.

 

プラグインとして追加したソースは以下です。

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()の後にコピーされてんじゃねぇか!!!

これは流石に草

 

解決方法

状況が分かったので色々ググってみたら、

  1. storeのmoduleを使ってプラグインのタイミングに読み込ませる方法
  2. mounted()内の処理のタイミングを遅らせる方法
  3. nuxt-client-init-moduleをインストールする方法

ざっくり、この3つが解決方法として見つかりました。

記事のリンクは張っておきます。

Vuex PersistedStateの値の復帰のタイミングが謎だったのでNuxtのplugin書いて解決した
「今やり直せよ。未来を。」かつて 2ch という掲示板に貼られた有名なコピペですが、努力の瞬間だけこの言葉を胸にしつつ、気づいたこと、調べこと、日々のことなどを連ねています。
vuex-persistedstateの値が復帰しない!? - Qiita
VuexのStateを永続化したい時は vuexのstateの値を永続化したい。そこで使っていたのが、vuex-persistedstate。 LocalStorageにstateの値を保持してくれる奴。使い方などは他の記事様...
Nuxt Store | Tetsuya Koibuchi Site
Welcome to Koibuchi Tetsuya Official Site

 

私は一番影響が少ない、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。リロードしてもうまく動いた。

何か問題があったらまた報告します。

 

こじらでした

じゃ

コメント

  1. […] 例えばこちらの記事でこの様な Store に反映されるタイミング問題の解決方法を紹介されています。 […]

タイトルとURLをコピーしました