7
7

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 5 years have passed since last update.

Nuxt.js の store が cannot read property ... となって動かなかったときの対策

Posted at

はじめに

これは Nuxt.js を触り始めたばっかりの超初心者が書いてます。
なので、上級者から見たら「そんなのあったりまえじゃないかー」みたいなことを書いてるかもしれませんがそこはご容赦ください。
逆に、これから始める人が自分みたいに何時間もこんなところで躓かないための道標になれるれば幸いです。

事の発端

最近 Nuxt.js をさわりはじめました。
Vue.js 自体は半年くらいいじってて、Vuex も一応多少は使ってる、といったレベルです。

で、今回はなんとなーく Nuxt.js 触り始めて、徐々に規模が大きくなってきたしここいらで Vuex やっとくかーって思って公式ドキュメントとかみながら書いてみたのですが、どうがんばっても(それこそサンプルコード丸写しレベルまでいっても)

Cannot read property 'commit' of undefined

って怒られてしまう、といった状況になってしまいました。
(あるいは dispatch が無いって言われるパターンもあり)

Vue Devtools をみても、確かに Vuex タブが空っぽで、そりゃ怒られるよな…って状況ではあったのですが、そもそもなぜ出てこないのか。
ぜんぜん意味がわからず、あれこれと調べてみたところ、ある1つの stack overflow の投稿に、思いもよらない解決方法があったのでした。

解決方法

$\huge{devサーバーを再起動する}$

以上。

つまり、Ctrl + C を押して一旦 Nuxt の dev server を停止し、改めて

yarn dev # or npm start

を実行します。
たったこれだけでした:sob:
悩みまくった3時間を返してくれ

どういうわけか、 Nuxt の store はつくっただけじゃ反映せず、dev server を再起動しないといけないみたいです。

まぁ、解決方法がわかってしまえばどうってことはないのですが、ただこれって、多分一旦諦めて、サーバー停止して、翌日とかにまた立ち上げたら治ってしまってただろうし、そうなってたらまた別のプロジェクトを作ったときにおなじようにドハマリしてしまってた可能性もあるわけで、気づけてよかったのかなぁ、と。

そしてきっと多分絶対またやらかすと思うので、忘れないためにもここに残して置こうと思ったのでした。

参考リンク

Vuex store is undefined in NUXT middleware

7
7
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
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?