0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Auth module(Nuxt.js) $store,$authが使用できない

Last updated at Posted at 2022-10-09

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を導入したり、いろいろ試しましたが、ダウングレードすれば解決できることに考えが回るまでかなり時間を要してしましました:sweat_smile:

学習し始めたうちは、初歩的なミスからエラーが発生することが多いので、考えられるエラーの要因のレベルを低いものから潰していくのが良いと思います!

vuex-persistedstateは、ブラウザバックしてもvuexのデータが初期化されないようにするためには必要になってきます。

このバグがすでに解消されたか分かりませんが、エラーが発生してしてしまった場合は参考にして頂けると幸いです:grin:

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?