【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()を仕込んでコンソールを確認してみました。

・画面のmounted()部分

  mounted () {
    // 追加 start
    console.log(this.$store)
    console.log(this.$store.getters)
    console.log(this.$store.getters.userId)
    // 追加 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書いて解決した
今やり直せよ。未来を。 -- 詠み人知らず
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。リロードしてもうまく動いた。

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

 

こじらでした

じゃ

コメント

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