vuex-module-decoratorsを使っているとERR_STORE_NOT_PROVIDEDが出る件の解消法

公開日: 

@Actionを記載したstoreのメソッドを呼び出そうとしたら下記エラーが出た。
Uncaught (in promise) Error: ERR_STORE_NOT_PROVIDED: To use getModule(), either the module
should be decorated with store in decorator, i.e. @Module({store: store}) or
store should be passed when calling getModule(), i.e. getModule(MyModule, this.$store)

さっぱり原因がわからなかったのですがようやく解決できたのでそのメモ。
sponcer link

構成と症状

NuxtとTypescriptによる環境で、ストアに関しては、Nuxtのストアのvuex-module-decorators によるアプローチの構成をそのまま使用していました。
initialiseStoresで@Actionのメソッドを呼び出すことは問題なくできたのですが、page側で呼び出すと本件のエラーが発生しました。
しかし、新規プロジェクトでまっさらに組むとこの問題が発生しないのです。
そのため、別途インストールしたライブラリがなんか悪さしてるのではないかと感じました。

解決方法

私の読みはあたり、nuxt-i18nをmodulesに追加してると本エラーが発生してるようでした。
しかし、ローカライズにも使っているのでこの子を外すわけにもいきません。
はてさてどうしたもんかとドキュメントを漁っていたらvuex: falseというオプションがあることを発見したので、いれてみたら見事解決しました!

nuxt.config.ts抜粋

まとめ

おそらくあとからVuexが使われたりすると競合しちゃうんでしょうね。 他のライブラリとかでももしかすると兼ね合いで発生するかもしれないので参考になればと思います。
  • このエントリーをはてなブックマークに追加
  • Pocket
PAGE TOP ↑