Nuxt.jsでAuth moduleを使用してログイン機能を構築し、ログイン後にログインボタンをユーザーボタンに切り替える機能を実装しようとしましたが、$store
や$auth
が反応しないというエラーが発生しました。
バックエンド側にはRuby on railsを使用しています。
ログイン機能を構築した際に参考になった記事はこちら
・Auth module
公式 - https://auth.nuxtjs.org/
https://qiita.com/mtoyopet/items/a94cd61f9213c6501519
https://www.youtube.com/watch?v=zzUpO8tXoaw
*↑英語での説明ですが、コードを書きながら説明されているので聞き取れなくても分かりやすいと思います。
・porxy, axios
公式(axios) - https://axios.nuxtjs.org/setup
公式(proxy) - https://axios.nuxtjs.org/options/#proxy
https://tns-blog.com/1
開発環境
"@nuxtjs/auth-next": "5.0.0-1624817847.21691f1",
"@nuxtjs/axios": "^5.13.6",
"@nuxtjs/proxy": "^2.1.0",
"nuxt": "^2.15.7"
"@nuxtjs/vuetify": "^1.12.1"
解決方法
@nuxtjs/auth-next
(v5) → @nuxtjs/auth
(v4)へダウングレードを行うとエラーが解消されました。
npm uninstall @nuxtjs/auth-next --save-dev // v5をアンインストール
npm install @nuxtjs/auth // v4をインストール
vuex-persistedstateを導入したり、いろいろ試しましたが、ダウングレードすれば解決できることに考えが回るまでかなり時間を要してしましました
学習し始めたうちは、初歩的なミスからエラーが発生することが多いので、考えられるエラーの要因のレベルを低いものから潰していくのが良いと思います!
vuex-persistedstateは、ブラウザバックしてもvuexのデータが初期化されないようにするためには必要になってきます。
このバグがすでに解消されたか分かりませんが、エラーが発生してしてしまった場合は参考にして頂けると幸いです